锋利的 jQuery (第二版) jQuery 中的 动画

2024年5月7日 151次阅读 来源: water_law

4.2 jQuery 中的动画

4.2.1 show() 和 hide()方法

show() 和 hide()方法让元素动起来
show(“slow”|”normal”|”fast”) 长度分别为600ms、400ms、200ms.
show(1000) 表示在 1000ms 内展示完毕.

4.2.2 fadeIn() 和 fadeOut()方法

方法作用：改变元素的不透明度。

4.2.3 slideUp() 和 slideDown()方法

方法作用：改变元素的高度。

4.2.4 自定义动画方法 animate() 方法

animate(params, [speed], [callback]):
1) params 为属性值及其映射，一般为 json 格式;
2) speed 为速度;
3) callback 为动画完成时执行函数。

1. 自定义简单动画

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQ-动画</title>
    <style>
    #app {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #003322;
    }
    </style>
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
    $(function() {
        $("#app").click(function() {
            $(this).animate({
                left: "100px"
            }, 300);
        });
    });
    </script>
</body>

</html>

2. 累加、累减动画

$(this).animate({left: "+=100px"}, 300); // 离左边距离增加 100px

3. 多重动画
(1) 同时执行多个动画

$(this).animate({left: "+=100px", height: "+=100px"}, 300); // 离左边距离增加 100px 高度增加100px  同时执行

(2) 按顺序执行多种动画

$(this).animate({left: "+=100px"}, 300); // 离左边距离增加100px  先执行
$(this).animate({height: "+=100px"}, 300); // 高度增加100px     后执行

4. 综合动画
以上动画效果的混合应用

4.2.5 动画回调函数

如果想在动画执行后改变元素的 css 样式， 这时就不能使用 css() 方法， 因为 css() 方法在动画执行之前就会立即执行。 所以这时候就要用到回调函数。

4.2.6 停止动画和判断是否处于动画状态

stop([clearQueue],[gotoEnd]): clearQueue 和 gotoEnd 只能取 Boolean 值。
clearQueue:  
gotoEnd:

直接使用 stop() 方法，则会立即停止当前正在进行的动画， 如果后续有动画则等待继续进行，以刚才的状态执行动画。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQ-动画</title>
    <style>
    #app {
        position: relative;
        width: 100px;
        height: 100px;
        border: 1px solid #003322;
    }
    </style>
    <script src="../jquery-1.8.3.js"></script>
</head>

<body>
    <div id="app">
    </div>
    <script>
    $(function() {
        $("#app").hover(function() {
            $(this).stop()
                .animate({                // 此时触发光标事件则会执行下面的动画，
                    left: "+=100px",      // 而不会执行光标移出时的动画
                }, 1000)    
                .animate({
                    height: "+=100px"
                }, 1000)
        }, function() {
            $(this).stop()
                .animate({
                    left: "-=100px",
                }, 1000)
                .animate({
                    height: "-=100px"
                }, 1000)
        });
    });
    </script>
</body>

</html>
    原文作者：water_law
    原文地址: https://segmentfault.com/a/1190000008325456
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞