jQuery，动画（show，hide等）

• 1.显示隐藏动画
• show()方法
  （1）：

// 不带参数，没有动画  
$("div").show();//作用等同于css(“display”, ”block”)

（2）：

//参数为数值，表示：执行动画时长  
$("div").show(2000);//单位为毫秒（ms） 

（3）：

//参数为字符串，是jQuery预设的值，共有三个，分别是：slow、normal、fast  
$("div").show(“slow”); //slow：600ms、normal：400ms、fast：200ms  

（4）：

// 参数一可以是数值类型或者字符串类型  
// 参数二表示：动画执行完后执行的回调函数  
$("div").show(2000, function() {});  

• hide()方法(同show一样)
  $("div").hide(); $("div").hide(1000); $("div").hide(“slow”); $("div").hide(1000, function(){});

• toggle()方法

$("div").toggle(speed,callback); 
//参数一是动画的执行时长(可以是指定字符或毫秒)，参数二是动画执行完成后的回调函数。
$("div").toggle(1000); 
//切换元素的可见状态。如果元素是可见的，切换为隐藏；如果元素是隐藏的，切换为可见的。

• 2.滑入滑出动画
• slideDown()方法
  通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。

$("div").slideDown(speed,callback); 
//作用：让元素以下拉动画效果展示出来

• slideUp()方法

$("div").slideUp(speed,callback);
//作用：让元素以上拉动画效果隐藏起来

• slideToggle()方法

$("div").slideToggle(speed,callback);  
//切换滑入滑出效果

• 3.淡入淡出动画
• fadeIn()方法
  通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

$("div").fadeIn(speed, callback); 
//作用：让元素以淡淡的进入视线的方式展示出来

• fadeOut()方法

$("div").fadeOut(1000,callback);
//作用：让元素以渐渐消失的方式隐藏起来

• fadeToggle()方法

$("div").fadeToggle('fast',function(){});
//作用：通过改变不透明度，切换匹配元素的显示或隐藏状态

• fadeTo()方法

$("div").fadeTo(speed, opacity, callback) ;
// 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

• 4.自定义动画
• 注意：所有能够执行动画的属性必须只有一个数字类型的值。
• 动画支持的属性：
  http://www.w3school.com.cn/jquery/effect_animate.asp
• 5.停止动画
• stop()
  作用：停止当前正在执行的动画
• 为什么要停止动画？
  如果多个动画在同一元素上执行，对这个元素来说，后面的动画将被放到队列中，从而形成动画队列。（联想：排队进站）
  上一个动画执行完成，下一个动画才能执行，例如下拉菜单，这样的效果有时不是我们想要的。
• 解释:
  当调用stop()方法后，当前动画停止于当前样式的值（不会到达目标值），队列中的下一个动画会立即开始。如果参数clearQueue被设置为true，那么队列中剩余的动画就被删除了，永远不会再执行。如果参数jumpToEnd被设置为true，那么当前动画会停止，但是参与动画的每一个CSS属性将被立即设置为它们的目标值。比如：slideUp()方法，那么元素会立即隐藏掉。如果存在回调函数，回调函数也会立即执行。