jQuery动画效果

最新推荐文章于 2024-05-07 19:24:40 发布

sleepwalker_1992

最新推荐文章于 2024-05-07 19:24:40 发布

阅读量1k

点赞数 1

分类专栏： jQuery

本文链接：https://blog.csdn.net/sleepwalker_1992/article/details/80357790

版权

jQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1、基本的show和hide

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

$(selector).toggle(speed,callback);

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

可选的 callback 参数是方法完成后所执行的函数名称。

2、淡入淡出

$(selector).fadeIn(speed,callback);

$(selector).fadeOut(speed,callback);

$(selector).fadeToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 fading 完成后所执行的函数名称。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

可选的 callback 参数是该函数完成后所执行的函数名称。

3、滑动

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

$(selector).slideToggle(speed,callback);

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是滑动完成后所执行的函数名称。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画效果</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button:eq(0)").click(function () {
                $("div").hide(1000);
            });
            $("button:eq(1)").click(function () {
                $("div").show(1000);
            });
            $("button:eq(2)").click(function () {
                $("div").toggle(1000);
            });
            $("button:eq(3)").click(function () {
                $("div").fadeIn(4000);
            });
            $("button:eq(4)").click(function () {
                $("div").fadeOut(4000);
            });
            $("button:eq(5)").click(function () {
                $("div").fadeToggle(4000);
            });
            $("button:eq(6)").click(function () {
                $("div").fadeTo(4000,.4);
            });
            $("button:eq(7)").click(function () {
                $("div").slideUp(2000);
            });
            $("button:eq(8)").click(function () {
                $("div").slideDown(2000);
            });
            $("button:eq(9)").click(function () {
                $("div").slideToggle(2000);
            });
        });
    </script>
</head>
<body>
    <button>hide 隐藏</button>
    <button>show 显示</button>
    <button>toggle 切换显示隐藏</button>
    <button>fadeIn 淡入</button>
    <button>fadeOut 淡出</button>
    <button>fadeToggle 淡入淡出切换</button>
    <button>fadeTo 渐变为给定的不透明度</button>
    <button>slideUp 向上滑动</button>
    <button>slideDown 向下滑动</button>
    <button>slideToggle 向上向下滑动切换</button>
    <div></div>
</body>
</html>

4、animate()

jQuery animate() 方法用于创建自定义动画。

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性。

可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是动画完成后所执行的函数名称。

当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画效果</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("div").animate({
                    left: '500px',
                    width: '100px',
                    height: '100px'
                },3000);
                $("div").animate({
                    top: '500px',
                    width: '200px',
                    height: '200px'
                },3000);
                $("div").animate({
                    left: '8px',
                    width: '100px',
                    height: '100px'
                },3000);
                $("div").animate({
                    top: '31px',
                    width: '200px',
                    height: '200px'
                },3000);
            });
        });
    </script>
</head>
<body>
    <button>animate 自定义动画</button>
    <div></div>
</body>
</html>

5、停止动画 stop()

jQuery stop() 方法用于停止动画或效果，在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画，但会继续执行后面排队的动画。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画效果</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button:first").click(function () {
                $("div").animate({
                    left: '500px',
                    width: '100px',
                    height: '100px'
                },3000);
                $("div").animate({
                    top: '500px',
                    width: '200px',
                    height: '200px'
                },3000);
            });
            $("button:eq(1)").click(function () {
                $("div").stop(false,true);
            });
        });
    </script>
</head>
<body>
    <button>animate 自定义动画</button>
    <button>stop 停止动画</button>
    <div></div>
</body>
</html>

即：

$("div").stop();相当于$("div").stop(false,false);

第一个动画执行过程中，执行stop，立马停止第一个动画，然后转入排队的第二个动画的执行。

$("div").stop(false,true);

第一个动画执行过程中，执行stop，立马执行完第一个动画，然后转入排队的第二个动画的执行。

$("div").stop(ture,false);

第一个动画执行过程中，执行stop，立马停止第一个动画，后续排队动画也不再执行。

$("div").stop(ture,true);

第一个动画执行过程中，执行stop，立马执行完第一个动画，后续排队动画不再执行。

6、链接（chaining）即链式编程

链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

提示：这样的话，浏览器就不必多次查找相同的元素。

如需链接一个动作，只需简单地把该动作追加到之前的动作上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery动画效果</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
    </style>
    <script src="jquery-3.3.1.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                //写法一
                $("div").css("color","red").slideUp(3000).slideDown(3000);
                //写法二
                $("div").css("font-size","20px")
                    .slideUp(3000)
                    .slideDown(3000);
            });
        });
    </script>
</head>
<body>
    <button>链接（chaining）</button>
    <div>我是一个方块</div>
</body>
</html>