Web实训知识点_0409

最新推荐文章于 2022-04-07 13:27:18 发布

jasmine__lu

最新推荐文章于 2022-04-07 13:27:18 发布

阅读量109

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/jasmine__lu/article/details/89146112

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一.用Jquery写二级菜单

二.Jquery的基础动画操作

<1>jquery的隐藏和显示

两个方法： hide（）

show（）

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script >
        $(document).ready(function () {
            $("#button1").click(function (){
                $("p").hide()
            })
            $("#button2").click(function () {
                $("p").show()
            })
        })
    </script>
</head>
<body>
<p>jquery动画效果、隐藏和显示</p>

<p></p>
<p></p>
<input type="button"value="隐藏"  id="button1">

<input type="button"value="显示"  id="button2">
</body>
</html>

语法（selector).hide(speed,callback)

（selector).show(speed,callback)

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

<script >
        $(document).ready(function () {
            $("#button1").click(function (){
                $("p").hide()

                    alert("恭喜你隐藏完成")

            })
            $("#button2").click(function () {
                $("p").show( )
                alert("恭喜你显示完成")

            })
        })
    </script>

jQuery toggle()

通过 jQuery，可以使用 toggle() 方法来切换 hide() 和 show() 方法。

显示被隐藏的元素，并隐藏已显示的元素

<2>jquer滑动

两个方法:slideDown()

sildeToggle（）

代码实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <style>
        #silde,#silde{
            padding: 5px;
            text-align: center;
            background-color: #4bffe8;
            border: solid 1px #ff51d3;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document).ready(function (){
            $("#silde").click(function(){
                $("#panel").slideToggle()
            })
        })
    </script>
</head>
<body>
<div id="silde">点击我，滑动显示或者隐藏面板</div>
<div id="panel">Hello Jquery</div>
</body>
</html>

<3>jquery 通过animate实现动画

代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
       $(document).ready(function () {
           $("button").click(function  (){
            $("div").animate({left:"200px"},1000,function(){
                $("div").css({background:"yellow"})
            })
           })
       })
    </script>

</head>
<body>
<button>开始动画</button>
<p>默认情况下，所以HTML元素有一个静态的位置，且是不可移动的。
    如果需要改变，那么将元素position属性设置为，absolute; relative;fixed;
</p>
<div style="background-color: red;height: 100px;width: 100px;position: absolute"></div>

</body>
</html>

<4>通过animate操作多个属性

<input type="button" value="开始动画" id="button">
<div style="background-color:red; height:100px;width:100px;position:absolute"></div>
<script>
       $(document).ready(function(){
          $("#button").click (){
             $("div").animate({
               left:"200px",opacity:‘o.5’,height:'160px',width:'160px'
 
             })    

      }) 
                 
 })


</script>

jasmine__lu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web实训知识点_0409

一.用Jquery写二级菜单二.Jquery的基础动画操作<1>jquery的隐藏和显示两个方法： hide（） show（）代码实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &...
复制链接

扫一扫