web实训知识点--0409-优快云博客

本文链接：https://blog.youkuaiyun.com/zytnice/article/details/89154749

本文深入讲解了jQuery动画效果的使用，包括隐藏、显示、滑动和自定义动画的方法，如hide()、show()、slideDown()及animate()等，并探讨了动画的链式调用和停止技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本语法 $===jquery

只有一个属性：值的时候 ----（）

有多个属性：值的时候 ---- { }

$（“*”）选取所有元素

$（ul li”）选取ul下的li

jquery动画效果：隐藏和显示

hide（）show()

speed 参数规定：显示和隐藏得速度，取值为‘slow’，‘fast’，毫秒（1秒等于1000毫秒）

callback参数：是隐藏或显示完成后执行函数的名称

toggle（）方法切换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(500);
               alert("恭喜你，隐藏成功")
           }) ;
            $("#button2").click(function(){;
                $("p").show(200,function{
                    alert("恭喜你，显示完成")
                });
            }) ;
            $("#button1").click(function(){;
                $("p").toggle(1000,function{
                $("p").css({color:"yellow"})
                })
            })
        })
    </script>
</head>
<body>
<p>JQuery的显示效果，隐藏和显示。</p>
<input type="button" value="隐藏" id="button1">
<input type="button" value="显示" id="button2">
<input type="button" value="切换" id="button3">
</body>
</html>

jquery动画效果：滑动

slideDown() slideToggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-1.9.1.min.js"></script>
    <style>
        #slide,#panel{
            padding: 5px;
            text-align: center;
            background-color: #edcc61;
            border: solid 1px #33b5e5;
        }
        #panel{
            display: none;
            padding: 40px;
        }
    </style>
    <script>
        $(document),ready(function(){
            $("#slide").click(function(){
                $("#panel").slideToggle()
            })

        })
    </script>
</head>
<body>
<div id="slide">点击我，滑动显示或者隐藏面板</div>
<div id="panel">hello jequery!!</div>
</body>
</html>

jquery动画效果：动画

animate（）方法用于创建自定义的动画

语法：

$（selector），animate（{params}），speed，callback）

必须的params参数定义形成动画的css属性。

可选参数和上面的几个

是否可以用animate（）方法来操作所有的css属性？

答：几乎可以，但需要记住，当使用animate（）方法的时候，必须使用camel标记法书写所有的属性名。

eg：css：backgroud—color 在animate中：backgroudColor animate（）：使用相对值。

如果你在彼此之后编写多个animate（）调用，jquery会创建包含这些方法调用的“内部”队列。然后逐一运行这些animate调用。

jquery动画效果：停止

stop（）用于在动画完成前对它进行停止。暂停队列中的一个动画，那么暂停该动画，然后系统会执行后面的动画。

jquery----链（Chaining）

通过juquer，可以把方法连接在一起，Chaining允许我们在一条语句中运行多个jequer方法（在相同元素上）

$("#p1").css({'color':"red"}).slideUp(1500).slideDown(1500).animate({backgrouodColor:"blue"},1000)
//意思是#p1元素先变红，然后向上一1.5秒的速度移动，然后向下以1.5秒的速度移动。最后将背景颜色变成蓝色。