jQuery动画使用总结

时间 2019-11-12

原文原文链接

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

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

语法：css

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

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

speed:动画速度，能够是fast，slow，也能够是毫秒值。java

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

看一个例子：框架

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

        $('.btn').on('click', function() {
            $('.wrap').animate({
                height: 'toggle'
            });
        });

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

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

        $('.btn').on('click', function() {
            $('.wrap').animate({heigt:'100px'});
            $('.wrap').animate({width:'200px'});
        });

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

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。若是但愿改变多个属性或者其余效果，则使用自定义动画。