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

时间 2019-12-07

标签锋利 jquery 第二动画栏目 JQuery 繁體版

原文原文链接

4.2 jQuery 中的动画

4.2.1 show() 和 hide()方法

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

4.2.2 fadeIn() 和 fadeOut()方法

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

4.2.3 slideUp() 和 slideDown()方法

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

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

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

1. 自定义简单动画jquery

<!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. 累加、累减动画json

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

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

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

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

$(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() 方法，则会当即中止当前正在进行的动画，若是后续有动画则等待继续进行，以刚才的状态执行动画。ui

<!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>

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