jQuery动画

.show([duration ] [,easing ] [,complete ])
.hide()
.fadeIn()
.fadeOut()
.slideDown()
.slideUp()

若想让动画依次进行并希望在动画效果展现后再有其他操作，则可将它们放在回调函数中，进行连续动画的设置，但看起来繁复。此时可以用以下方式进行改写

  $box.hide(1000, function(){
         $box.show(1000, function(){
           $box.fadeOut('slow',function(){
            $box.fadeIn('slow',function(){
             $box.slideUp(function(){
              $box.slideDown(function(){
                console.log('动画执行完毕')
      })
     })
   })
  })
 })
})、、等价于$box.hide(1000)
               .show(1000)
               .fadeOut()
               .fadeIn()
               .slideUp()
               .slideDown(function(){
               console.log('真的完毕了')
               })

jQuery自定义动画 .animate()
.animate( properties [, duration ] [, easing ] [, complete ] )

properties：css的属性及属性值对象
示例：

$('.box').click(function() {
 $('.box').animate({
   opacity: 0.25,
   left: '+=50',
   height: 'toggle'
 }, 5000, function() {
   // Animation complete.
 });
});/*此时在设置上下左右移动时原dom中该元素的position应设置为absolute*/

jQuery动画的停止
$('.box').finish()：停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
$('.box').clearQueue()：清除动画队列中未执行的动画

.stop( [clearQueue ] [, jumpToEnd ] )：停止当前正在运行的动画

• clearQueue(default: false)
• jumpToEnd(default: false)

$('.box').stop(false,false)：执行到当前的动画处后突然掉到后面的动画去执行，当前动画的剩余部分不再执行\
$('.box').stop(false,true)：突然跳到当前这一帧的末尾，然后继续执行后续
$('.box').stop(true,false)：运动到当前位置突然停止
$('.box').stop(true,true)：突然落到当前这一帧的末尾再停止

false,false
false,true
true,false
true,true