进阶篇：jQuery动画（21-2）

饥人谷学习进阶第 21 天

动画基础

动画是异步过程，动画会被放入动画队列

.hide([duration][,easing][,complete])

用于隐藏元素，没有参数的时候等同于直接设置display属性

第二个参数为缓动函数（均匀变化？先快后慢？先慢后快）
第三个参数为回调函数，动画效果完成之后再去do something

$('.test').hide()
// 等同于$('.test').css('display', 'none')

$('#book').hide(300, function(){
    alert('Animation complete.')
})
$('#book').hide(300, 'linear', function(){
    alert('Animation complete.')
})

.show([duration][,easing][,complete])

用于显示元素，用法和hide相似

.toggle([duration][,easing][,complete])

事件处理套件也有一个名为.toggle()方法。哪个被调用取决于传递的参数的设置

用来切换元素的隐藏、显示，类似于toggleClass，用法和show、hide类似

渐变

.fadeIn([duration][,easing][,complete])

通过淡入的方式显示匹配元素，参数名义上和上面相同

$('#book').fadeIn('slow', function() {
    //Animation complete
})

.fadeOut([duration][,easing][,complete])

通过淡出的方式隐藏匹配元素

$('#book').fadeOut('slow', function() {
    //Animation complete
})

.fadeTo(duration,opacity[,easing][,complete])

调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果

$('#book').fadeTo('slow', 0.5, function() {
  // Animation complete.
})

.fadeToggle([duration][,easing][,complete])

通过匹配元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none，所以元素不影响页面的布局。

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear")
})

滑动

.slideDown([duration][,easing][,complete])

用滑动动画显示一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式

$('#book').slideDown('slow', function() {
    // Animation complete.
});

.slideUp([duration][,easing][,complete])

用滑动动画隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面的下面部分滑上去，当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局。

$('#book').slideUp('slow', function() {
    // Animation complete.
});

.slideToggle([duration][,easing][,complete])

用滑动动画显示或隐藏一个匹配元素，方法将给匹配元素的高度的动画，这会导致页面中，在这个元素下面的内容往下或往上滑。display属性值保存在jQuery的数据缓存中，所以display可以方便以后可以恢复到初始值。

如果一个元素的display属性值为inline，然后是隐藏和显示，这个元素将再次显示inline。当一个隐藏动画后，高度值达到0的时候，display样式属性被设置为none，以确保该元素不再影响页面布局。

$('#clickme').click(function() {
 $('#book').slideToggle('slow', function() {
 // Animation complete.
 });
});

动画队列

连续动画会按顺序加入动画队列，先进先出按顺序执行

$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(properties[,duration][,easing][,complete])

第一个参数properties是CSS属性和值的对象，动画将根据这组对象移动。

需要注意的是：

1. 动画为渐变过程，所以设置的CSS属性和值对象应为可渐变的才能渐变（如：透明度，位置和宽高等），如果不是可渐变的（如：display、背景色（需要插件）等）。
2. 动画效果遵循CSS原则（如：只有绝对定位才能通过left设置位置移动）
3. .animate()也是将动画放入动画队列一个个去执行

$('#auto').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
// 当然可以分别将下一个动画写入前一个动画的回调函数如动画队列的代码示例一样
// 也可以下面这样
$('#auto').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      .animate({
        left: '100px',
        top: '100px'
      }, 1000)
      .animate({
        left: '0',
        top: '100px'
      }, 1000)
      .animate({
        left: '0',
        top: '0'
      }, 1000)
    })

.clearQueue

清楚动画队列中未执行的动画

.finish

停止当前动画，并清除动画队列中所有未完成的动画，最终展示动画队列最后一帧的最终状态

.stop([clearQueue][,jumpToEnd])

停止当前正在执行的动画
clearQueue(default:false)
jumpToEnd(default:false)

    $('#btn4').click(function(){
      $('.box').animate({
        left: '100px'
      }, 1000)
      $('.box').animate({
        left: '100px',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '100px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })
    $('#btn6').click(function(){
      // 停止当前动画
      // 如果动画队列后续还有动画直接从当前动画执行到的位置执行动画队列下一个动画
      $('.box').stop()
    })
    $('#btn7').click(function(){
      // 停止当前动画，并清除未执行的动画队列
      // 停在当前动画执行到的位置
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      // 停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      // 停止当前动画，并清除未执行的动画队列，并且当前动画展示动画队列最后一帧最终状态
      $('.box').finish()
    })

当用户点击一些按钮需要跳过冗余的动画队列中的动画时应用上面的针对动画队列的操作。
详细方法图解可参考：
jQuery 动画效果 与 动画队列：自定义动画