jQuery动画使用总结

jQuery动画我用的比较多的仅仅只有show和hide，但是作为一个被我们大多数人所熟知的框架，相信他的动画功能还是比较多样的，这里做个小总结。

1.jQuery animate()，用于创建自定义动画。

语法：

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

params:动画要操作的属性，几乎包括所有的css属性，不过需要注意，当要操作注入padding-left等时需要使用camel命名法，不能用小横线这种方式命名属性。同时，除了使用绝对值方式操作属性值，还可以使用相对值得方式，也就是在原来的基础上加减值。

speed:动画速度，可以是fast，slow，也可以是毫秒值。

callback:动画完成后执行的函数名称。

看一个例子：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>jQuery动画</title>

        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

    </head>

    <body>

        <button class="btn">开始动画</button>

        <div style="width: 400px;background-color: pink;" class="wrap">

            <div style="width: 100px;background-color: lightcyan" class="content">i am content</div>

        </div>

    </body>

    <script>

        $('.btn').on('click', function() {

            $('.wrap').animate({

                height: '300px',//可以使用绝对值

                padding:'30px',

            }, 1000, function() {

                $('.content').animate({

                    width:'+=200px',//也可以使用相对值，在原来的基础上加或者减

                    marginTop:'100px'//camel命名法操作多个单词拼接的属性值

                }, 1000, function() {

                    alert('动画执行完毕！');

                });

            });

        });

    </script>

</html>

给动画使用预定义值：slow，fast，toggle

        $('.btn').on('click', function() {

            $('.wrap').animate({

                height: 'toggle'

            });

        });

toggle会让元素的height在没有到初始值之间切换。

使用动画的队列功能：如果给同一个元素，按照顺序定义不同的动画，则动画会按照定义顺序依次执行

        $('.btn').on('click', function() {

            $('.wrap').animate({heigt:'100px'});

            $('.wrap').animate({width:'200px'});

        });

如果我们把宽高变化，写在同一个animate中，则他们会同时变化，这样分开写，他们会按照我们书写的顺序，依次执行。

2.jQuery stop()，停止动画。

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

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

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

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

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

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

3.show()和hide():显示和隐藏元素，可带参数，决定动画的快慢。

duration：决定动画执行快慢的参数，可取fast，slow，normal和具体的数值，单位是毫秒。

easing：过渡的缓动函数，jQuery中提供两种匀速和变速，linear表示匀速直线运动，而swing则表示变速运动。

4.toggle():切换动画

5.slideUp()和slideDown(),slideToggle():上下动态隐藏元素

        $('.btn').on('click', function() {

            $('.wrap').slideToggle();

        });

6.fadeIn(),fadeOut(),fadeToggle():淡入淡出显示和隐藏元素

7.fadeTo():让元素变化为固定的透明度

        $('.btn').on('click', function() {

            $('.wrap').fadeTo('slow',.5);

        });

一般来说，toggle是该动画分类中两个相反子动画的组合动画，因此后面的例子都未给出。这些jQuery动画，除了自定义动画以外，基本分为三大类，fade，slide和show。show类动画是高度和透明度同时变化来显示和隐藏的动画。fade是改变透明度显示和隐藏的动画，slide类是通过改变高度来显示和隐藏的动画。

小结：在使用jQuery动画的过程中，如果我们希望同时改变高度和透明度，则使用show和hide。如果只希望改变高度，则使用slideUp和slideDown，如果只希望改变透明度则使用fadeIn和fadeOut。如果希望改变多个属性或者其他效果，则使用自定义动画。

秒客网