$('#a1').slideToggle(3000);   滑动切换，单次时间为三秒。

.slideUp()：滑上（滑出）动画

使用方式：

    1.$('div').slideUp(3000);   三秒滑出

    2.$('div').slideUp(3000,function(){});   三秒滑出，并执行回调函数。

滑出动画其实就是display变为none的过程。

.slideDown()：滑下，也叫滑入，下拉动画的意思。

使用方式：

    1.$('div').slideDown(3000);   三秒的时间滑入

    2.$('div').slideDown(3000,function(){});  三秒滑入，并执行回调函数。

使用滑入动画之前要确保盒子是隐藏的，也就是display属性值为none。

.toggle()：切换的意思，在显示与隐藏之间来回切换。

如果元素最初是显示的，他会被隐藏；

如果元素最初是隐藏的，它会被显示；

使用方式：

    1.直接显示隐藏： .toggle()

    2.指定时间：.toggle(3000)

    3.指定时间和回调函数：.toggle(3000,function(){})

控制元素的显示和隐藏，改变的是display属性。

.show()：显示元素

使用和.hide()完全一致。

注意事项：

• show与hide方法是修改的display属性，通过是visibility属性布局需要通过css方法单独设置

• 如果使用!important在你的样式中，比如display: none !important，如果你希望.show()方法正常工作，必须使用.css('display', 'block !important')重写样式

• 如果让show与hide成为一个动画，那么默认执行动画会改变元素的高度，高度，透明度

.hide()：隐藏元素

有四种类型：

    1.$('div').hide()     直接隐藏

    2.$('div').hide(3000)    三秒后隐藏

    3.$('div').hide('fast')    通过设置值隐藏。fast、normal、slow

    4.$('div').hide(3000,function(){

            alert("........")

})     三秒后隐藏，并执行回调函数

• .stop(); 停止当前动画，点击在暂停处继续开始

• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。

• .stop(); 停止当前动画，点击在暂停处继续开始

• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。

• .stop(); 停止当前动画，点击在暂停处继续开始

• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。

• .stop(); 停止当前动画，点击在暂停处继续开始

• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。

• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

简单的说：参考下面代码、

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
    width: 300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)

1. stop()：只会停止第一个动画，第二个第三个继续

2. stop(true)：停止第一个、第二个和第三个动画

3. stop(true ture)：停止动画，直接跳到第一个动画的最终状态 

• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念

如果多个元素执行动画，回调将在每个匹配的元素上执行一次，不是作为整个动画执行一次

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

animate()方法实际应用

.animate({
    left: 50, 
    width: '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);

.animate({
    width: "toggle"
});

.animate({ 
    left: '+=50px'
}, "slow");

操作一个元素执行3秒的淡入动画，对比一下2组动画设置的区别
$(elem).fadeOut(3000)  
$(elem).animate({   
    opacity:0
},3000)

• toggle：切换显示与隐藏效果

• sildeToggle：切换上下拉卷滚效果

• fadeToggle：切换淡入淡出效果

toggle与slideToggle细节区别：

• toggle：动态效果为从右至左。横向动作，toggle通过display来判断切换所有匹配元素的可见性

• slideToggle：动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性

fadeTo()方法淡入效果

fadeTo(3000,0.2,function(){

      3000为时间单位毫秒 0.2位透明度  后面可以使用函数

})

fadeToggle()方法同fadeOut()方法和fadeIn()方法同等

实现淡入淡出效果

可使用回调函数

• 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%

• 如果元素本身是可见的，不对其作任何改变。如果元素是隐藏的，则使其可见

fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果

可以使用回调函数