jQuery的动画处理总结

时间 2019-11-18

原文原文链接

最近一年多一直在作前端的东西，因为老板在追求一些年轻动感的效果，让页面元素不能仅仅是简单的隐藏显示，因此常常会使用一些动画效果，发现jQuery的动画真心好用啊，把经常使用的几个总结一下，但愿再也不每次使用的时候还去翻API前端

queue()/ dequeue()

这两个方法就像Ajax的XMLHttpRequest对象同样的隐蔽，不为常人所知。这两个方法在动画处理的时候颇有用，咱们常常会写一些这样的代码json

$('#test').animate({
            "width": "300px",
            "height": "300px",
            "opacity":"1"
        });

这样test div的height、width、opacity是同时变化的，有时候咱们不但愿同步执行，而是形状的变化和透明度的变化分开，先变成300*300的div，而后透明度再逐渐变化，咱们须要这么写数组

$('#test').animate({
            "width": "300px",
            "height": "300px",
        }, function () {
            $('#test').animate({ "opacity": "1" });
        });

同窗们能够想象一下要是有十个动画流程，那代码是什么样的，queue()和dequeue()能够解决此类问题，为全部的流程方法见一个队列，让function依次调用，先看一下语法ide

queue( [queueName ], newQueue ) 操做欲执行队列方法函数

第一个参数是队列名称，不写的话默认是fx动画

第二个参数能够是一个函数数组，存放全部队列函数，也能够是一个回掉函数，用于向队列中添加新函数this

dequeue( [queueName ] ) 为匹配元素执行队列中的下一个functionspa

每次调用此方法执行队列中下一函数code

var q = [
            function () {
                $(this).animate({
                    "width": "200px",
                    "height":"200px"
                }, next)
            },
            function () {
                $(this).animate({
                    "width": "400px",
                    "height": "400px"
                }, next);
            }
        ];

        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();

上面代码就是可让test div先变成200*200的，而后再变为400*400的，每一个动画都执行回掉函数，调用队列中下一个方法，两个动画依次执行，若是在执行期想再添加某个函数能够这样orm

var q = [
            function () {
                $(this).animate({
                    "width": "200px",
                    "height":"200px"
                }, next)
            },
            function () {
                $(this).animate({
                    "width": "400px",
                    "height": "400px"
                }, next);
            }
        ];

        function next(){
            $('#test').dequeue('myQueue');
        }

        $('#test').queue('myQueue', q);
        next();
        $('#test').queue('myQueue',function () {
            $(this).slideUp().dequeue('myQueue');
        });

总而言之这两个方法就是为了方便动画按照预约次序执行

clearQueue() /stop()

这两个方法主要是为了取消动画

clearQueue( [queueName ] ) 将队列中函数清空

stop( [queue ] [, clearQueue ] [, jumpToEnd ] ) 用于中止正在进行的动画

queue：正在进行的动画队列名称

clearQueue：默认值为false，是否将队列自己也清空

jumpToEnd：默认值为false，是否当即执行完动画

若是想中止刚才动画能够这么写

$('#test').clearQueue('myQueue');

这样写不会不会终止动画，只是当前动画执行完后，不会再调用队列中下一个动画（队列被清空了嘛，没有下一个了），若是想当即中止动画，能够这么写

$('#test').stop();

至于中止动画是暂停仍是当即执行完，就学要配置stop()的参数了

slideDown()/ slideUp()/ slideToggle()

slide效果在作动画的时候常常会使用，尤为是菜单，这三个函数很简单，就是元素收起/伸展/自动判断收起伸展，可是其参数不只仅是duration，咱们还能加一些其余的控制，看看API中的介绍，这Sanger函数参数相似，那slideUp举例

slideUp( [duration ] [, easing ] [, complete ] ) easing是渐变方式，这个我历来没有手工改动过，duration不写的话，默认会用大概一秒的时间完成动画

slideUp(options)

options中经常使用的配置有

duration：动画时间

queue：这个看了上面天然会懂

step:动画过程当中每次属性改动时执行

complete：动画完成时执行

start：动画开始时执行

always：动画被终止或者意外发生没有执行完时发生

这三个函数在执行的时候会修改元素height，在sideUp()执行完后会把height复原，并把diaplay设为none

fadeIn()/ fadeOut()/ fadeToggle()/ fadeTo()

fadeIn()/ fadeOut()/ fadeToggle() 的用法和slide系列相似，再也不一一说明，只不过这三个函数修改的时元素的透明度，fadeOut()函数在执行完后会将元素opacity复原，并把display属性设为none

fadeTo( duration, opacity [, easing ] [, complete ] ) fadeTo()方法就没有那么复杂了，可是fadeTO()的duration和opacity不是可省略的，必须写

show()/ hide()/ toggle()

这三个函数的用法和slide系列同样，可是在效果上有几点儿不一样

1.若是参数duration不写，那么回当即执行没有动画

2.这个动画同时修改height、width、opacity属性

3.hide()执行完成后会将height、width、opacity属性还原，并把display设为none

animate()

有些复杂的动画靠上面几个函数不可以实现，这时候就是强大的animate派上用场的时候了,animate()有两种用法

.animate( properties [, duration ] [, easing ] [, complete ] )

大部分属性都不用解释，properties是个json，属性的值能够是字面量、function、”toggle”、简单表达式，若是是function会把返回值赋给属性，熟悉jQuery的同窗确定明白“toggle”是什么，就是让一个属性在初始值和最小值之间切换，可以使用toggle的属性有width、height、opacity等包含数字值属性，简单表达式是+=、-=等，好比能够这么些 “width”:”+=10px”。

$( "#block" ).animate({
    width: "70%",
    opacity: 0.4,
    marginLeft: "0.6in",
    fontSize: "3em",
    borderWidth: "+=10px"
  }, 1500 );

若是传入了回掉函数，该函数会在动画执行完后调用

.animate( properties, options )

这种用法更为灵活，properties和前一个用法同样，经常使用options有

duration：动画时间

queue：function队列

step：每次属性调整的回掉函数

complete：完成动画的回掉函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生

要不说jQuery好用，上面这几个配置是否是很熟悉呢

$( "#book" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 5000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });

hover()

严格说这个并非个动画函数，可是因为低版本IE的hover对不少元素都不起做用，用CSS没法完成不少动做，因此常常须要使用JavaScript进行haver事件的处理。

.hover( handlerIn(eventObject), handlerOut(eventObject) )

方法很简单，很少介绍了，这样就能把mousein 和mouseout写在一块儿了。