jQuery动画

最新推荐文章于 2021-05-30 08:56:47 发布

即将入土的羸弱老年人

最新推荐文章于 2021-05-30 08:56:47 发布

阅读量250

点赞数

本文链接：https://blog.csdn.net/qq_36823300/article/details/102012276

版权

Web 同时被 3 个专栏收录

23 篇文章 1 订阅

订阅专栏

HTML

21 篇文章 1 订阅

订阅专栏

Note

21 篇文章 0 订阅

订阅专栏

jQuery的一项很强大的功能是可以在HTML元素上实现动画效果，如显示、隐藏、淡入淡出和滑动等。

1、执行自定义的动画

调用animate()方法可以根据一组CSS属性实现自定义的动画效果。语法如下。

$(selector).animate( properties [, duration ] [, easing ] [, complete ] )

参数说明如下。

properties：产生动画效果的CSS属性和值，可以使用的CSS属性包括backgroundPosition、borderWidth、borderBottomWidth、borderLeftWidth、borderRightWidth、borderTopWidth、borderSpacing、margin、marginBottom、marginLeft、marginRight、marginTop、outlineWidth、padding、paddingBottom、paddingLeft、paddingRight、paddingTop、height、width、maxHeight、maxWidth、minHeight、minWidth、font、fontSize、bottom、left、right、top、letterSpacing、wordSpacing、lineHeight、textIndent等。
duration：指定动画效果运行的时间长度，单位为ms，默认值为normal（400ms）。可选值包括slow和fast。
easing：指定设置动画速度的擦除函数，内置的擦除函数包括swing（摇摆擦除）和linear（线性擦除）。
complete：指定动画效果执行完后调用的函数。

使用animate()方法实现自定义动画效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <div id="box" style="background: #0000ff;height: 100px;width: 100px;margin: 6px;"></div>
    <button id="btn1">变长</button>
    <button id="btn2">恢复</button>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
           $("#btn1").click(function () {
               $("#box").animate({height: "300px"});
           });
           $("#btn2").click(function () {
               $("#box").animate({height: "100px"});
           });
        });
    </script>

</body>

</html>

2、显示和隐藏HTML元素

在jQuery中，可以用动画效果显示和隐藏HTML元素。

1）显示HTML元素

使用show()方法可以显示指定的HTML元素，语法如下。

.show( [duration ] [, easing ] [, complete ] )

参数说明如下。

duration：指定动画效果运行的时间长度，单位为ms，默认值为normal（400ms）。可选值包括slow和fast。
easing：指定设置动画速度的擦除函数，内置的擦除函数包括swing（摇摆擦除）和linear（线性擦除）。
complete：指定动画效果执行完后调用的函数。

这3个参数都是可选的，也就是说，最简单的调用show()的方法就是不使用参数。也可以使用下面的方法调用show()。

使用show()方法显示HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>

<body>

    <button>Show it</button>
    <p style="display: none">Hello HTML5</p>

    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $("button").click(function () {
            $("p").show("slow");
        });
    </script>

</body>

</html>

2）隐藏HTML元素

使用hide()方法可以隐藏指定的HTML元素，语法如下。

.hide( [duration ] [, easing ] [, complete ] )

参数的含义与show()方法中的完全相同。

使用hide()方法隐藏HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>

<body>

    <button>Hide it</button>
    <p>Hello HTML5</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("button").click(function () {
            $("p").hide("slow");
        });
    </script>

</body>

</html>

3）切换HTML元素的显示和隐藏状态

使用toggle()方法可以切换HTML元素的显示和隐藏状态，语法如下。

.toggle( [duration ] [, easing ] [, complete ] )

参数的含义与show()方法中的完全相同。

使用toggle()方法显示和隐藏HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>

<body>

    <button>Show and Hide it</button>
    <p>Hello HTML5</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("button").click(function () {
            $("p").toggle("slow");
        });
    </script>

</body>

</html>

3、淡入淡出效果

在显示幻灯片时，经常使用淡入淡出的效果。淡入和淡出效果实际上就是透明度的变化，淡入就是由透明到不透明的过程，淡出就是由不透明到透明的过程。

1）fadeIn()方法

使用fadeIn()方法可以实现淡入效果，语法如下。

fadeIn( [duration ] [, easing ] [, complete ] )

使用fadeIn()方法实现淡入效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        span {
            color: red;
            cursor: pointer;
        }
        div {
            margin: 3px;
            width: 80px;
            height: 80px;
            display: none;
            float: left;
        }
        div#one {
            background: #ff0000;
        }
        div#two {
            background: #00ff00;
        }
        div#three {
            background: #0000ff;
        }
    </style>
</head>

<body>

    <span>Click here......</span>
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document.body).click(function () {
            $("div:hidden:first").fadeIn("slow");
        });
    </script>

</body>

</html>

2）fadeOut()方法

使用fadeOut()方法可以实现淡出效果，语法如下。

fadeOut( [duration ] [, easing ] [, complete ] )

使用fadeOut()方法实现淡出效果。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        .box, button {
            float: left;
            margin: 5px 10px 5px 0;
        }
        .box {
            width: 80px;
            height: 80px;
            background: #009900;
        }
        #log {
            clear: left;
        }
    </style>
</head>

<body>

    <button id="btn1">fade out</button>
    <button id="btn2">show</button>

    <div id="log"></div>
    
    <div id="box1" class="box">linear</div>
    <div id="box2" class="box">swing</div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("#btn1").click(function () {
            function complete() {
                $("<div/>").text(this.id).appendTo("#log");
            }

            $("#box1").fadeOut(1600, "linear", complete);
            $("#box2").fadeOut(1600, complete);
        });

        $("#btn2").click(function () {
            $("div").show();
            $("#log").empty();
        })
    </script>

</body>

</html>

3）fadeTo()方法

使用fadeTo()方法可以直接调节HTML元素的透明度，语法如下。

fadeTo( duration, opacity [, easing ] [, complete ] )

参数opacity表示透明度，取值范围为0~1.

使用fadeTo()方法直接调节HTML元素的透明度。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <p>单击我，我会变透明。</p>
    <p>用于比较。</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("p:first").click(function () {
            $(this).fadeTo("slow", 0.33);
        });
    </script>

</body>

</html>

4）fadeToggle()方法

使用fadeToggle()方法可以用淡入淡出的效果切换显示和隐藏HTML元素（即如果HTML元素原来是隐藏的，则调用fadeToggle()方法后会逐渐变成显示；如果HTML元素原来是显示的，则调用fadeToggle()方法后会逐渐变成隐藏。）

fadeToggle()方法的语法如下。

fadeToggle( duration, opacity [, easing ] [, complete ] )

使用fadeToggle()方法以淡入淡出的效果切换显示和隐藏HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
    </style>
</head>

<body>

    <button>切换 p1</button>
    <button>切换 p2</button>

    <p>我是p1，我会以慢速、线性的方式切换显示和隐藏。</p>
    <p>我是p2，我会快速地切换显示和隐藏。</p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("button:first").click(function () {
            $("p:first").fadeToggle("slow", "linear");
        });
        $("button:last").click(function () {
            $("p:last").fadeToggle("fast");
        })
    </script>

</body>

</html>

4、滑动效果

jQuery可以用滑动效果显示和隐藏HTML元素。

1）SlideDown()方法

使用SlideDown()方法可以用滑动效果显示HTML元素，语法如下。

SlideDown( [duration ] [, easing ] [, complete ] )

使用SlideDown()方法以滑动效果显示HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            background: #de9a44;
            margin: 3px;
            width: 80px;
            height: 40px;
            display: none;
            float: left;
        }
    </style>
</head>

<body>

    Click me!
    <div></div>
    <div></div>
    <div></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document.body).click(function () {
            if ($("div").is(":hidden")) {
                $("div").slideDown("slow");
            } else {
                $("div").hide();
            }
        })
    </script>

</body>

</html>

2）SlideUp()方法

使用SlideUp()方法可以用滑动效果显示和隐藏HTML元素，语法如下。

SlideUp( [duration ] [, easing ] [, complete ] )

使用SlideUp()方法以滑动效果隐藏HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            background: #de9a44;
            margin: 3px;
            width: 80px;
            height: 40px;
            float: left;
        }
    </style>
</head>

<body>

    Click me!
    <div></div>
    <div></div>
    <div></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(document.body).click(function () {
            if ($("div").is(":hidden")) {
                $("div").show();
            } else {
                $("div").slideUp("slow");
            }
        })
    </script>

</body>

</html>

3）SlideToggle()方法

使用SlideToggle()方法可以用滑动效果切换显示和隐藏HTML元素，语法如下。

SlideToggle( [duration ] [, easing ] [, complete ] )

使用SlideToggle()方法以滑动效果切换显示和隐藏HTML元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        p {
            width: 400px;
        }
    </style>
</head>

<body>

    <button>切换</button>

    <p>
        使用SlideToggle()方法以滑动效果切换显示和隐藏HTML元素。
    </p>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("button").click(function () {
            $("p").slideToggle("slow");
        })
    </script>

</body>

</html>

5、动画队列

jQuery可以定义一组动画动作，把它们放在队列（queue）中顺序执行。队列是一种支持先进先出原则的数据结构（线性表），它只允许在表的前端（front）进行删除操作，而在表的后面（rear）进行插入操作。

1）queue()方法

使用queue()方法可以管理和显示匹配元素的动画队列中要执行的函数，语法如下。

queue( [queueName] )

参数queueName是队列的名称。

使用queue()方法显示动画队列。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 60px;
            background: green;
            display: none;
        }
        div.newcolor {
            background: blue;
        }
        p {
            color: red;
        }
    </style>
</head>

<body>

    <p>队列长度：<span></span></p>
    <div></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var div = $("div");
        function runIt() {
            div.show("slow");
            div.animate({left: '+=200'}, 2000);
            div.slideToggle(1000);
            div.slideToggle("fast");
            div.animate({left: '-=200'}, 1500);
            div.hide("slow");
            div.show(1200);
            div.slideUp("normal", runIt);
        }
        function showIt() {
            var n = div.queue("fx");
            $("span").text( n.length );
            setTimeout(showIt, 100);
        }
        runIt();
        showIt();
    </script>

</body>

</html>

2）dequeue()方法

使用dequeue()方法可以执行匹配元素的动画队列中的下一个函数（同时将其移出队），语法如下。

dequeue( [queueName] )

参数queueName是队列的名称。

3）clearQueue()方法

使用clearQueue()方法可以删除匹配元素的动画队列中所有未执行的函数，语法如下。

clearQueue( [queueName] )

参数queueName是队列的名称。

在之前的代码中添加一个“停止”按钮，代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            margin: 3px;
            width: 40px;
            height: 40px;
            position: absolute;
            left: 0px;
            top: 80px;
            background: green;
            display: none;
        }
        div.newcolor {
            background: blue;
        }
        p {
            color: red;
        }
    </style>
</head>

<body>

    <button id="stop">Stop</button>
    <p>队列长度：<span></span></p>
    <div></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        var div = $("div");
        function runIt() {
            div.show("slow");
            div.animate({left: '+=200'}, 2000);
            div.slideToggle(1000);
            div.slideToggle("fast");
            div.animate({left: '-=200'}, 1500);
            div.hide("slow");
            div.show(1200);
            div.slideUp("normal", runIt);
        }
        function showIt() {
            var n = div.queue("fx");
            $("span").text( n.length );
            setTimeout(showIt, 100);
        }
        runIt();
        showIt();
        $("#stop").click(function () {
            var myDiv = $("div");
            myDiv.clearQueue();
        });
    </script>

</body>

</html>

单击“停止”按钮，会在执行完当前动画后停止，同时队列长度变成了0。

4）delay()方法

使用delay()方法可以延迟执行动画队列中的函数，语法如下。

delay( duration [, queueName ] )

参数duration指定延迟的时间，单位为ms；参数queueName是队列的名称。

delay()方法的使用。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Test</title>
    <style>
        div {
            position: absolute;
            width: 60px;
            height: 60px;
            float: left;
        }
        .first {
            background-color: #33ff33;
            left: 0;
        }
        .second {
            background-color: #3333ff;
            left: 80px;
        }
    </style>
</head>

<body>

    <p><button>Run</button></p>
    <div class="first"></div>
    <div class="second"></div>

    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $("button").click(function () {
            $("div.first").slideUp(300).delay(800).fadeIn(400);
            $("div.second").slideUp(300).fadeIn(400);
        });
    </script>

</body>

</html>

5）stop()方法

使用stop()方法可以停止正在执行的动画，语法如下。

stop( [queueName ] [, clearQueue ] [, jumpToEnd ] )

参数说明如下。

queueName：队列的名称
clearQueue：指定是否删除队列中的动画，默认为False，即不删除。
jumpToEnd：指定是否立即完成当前的动画，默认为False。

6）finish()方法

使用finish()方法可以停止正在执行的动画并删除队列中的所有动画，语法如下。

finish( [queueName ] )

参数queueName是队列的名称。

finish()方法相当于clearQueue()方法加上stop()方法的效果。

7）jQuery.fx.interval属性

使用jQuery.fx.interval属性可以设置动画的显示帧速，单位为100ms。

8）jQuery.fx.off属性

将jQuery.fx.off属性设置为true，可以全局性地关闭所有动画（所有效果会立即执行完毕），将其设为false之后，可以重新开启所有动画。

在下面的情况下，可能需要使用jQuery.fx.off属性关闭所有动画。

在配置比较低的计算机上使用jQuery。
由于动画效果而遇到了可访问性问题。

即将入土的羸弱老年人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录