jQuery效果-滑动淡入淡出动画学习笔记

jQuery效果
1.基本效果
（1）show([speed,[easing],[fn]])
显示隐藏的匹配元素。
这个就是 ‘show( speed, [callback] )’ 无动画的版本。如果选择的元素是可见的，这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;，这个方法都将有效。

• speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
• fn 回调函数
• easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

$("p").show("fast",function(){
   $(this).text("Animation Done!");
 });

（2）hide([speed,[easing],[fn]])
隐藏显示的元素，与show类似

$("p").hide("fast",function(){
   alert("Animation Done.");
 });

（3）toggle([speed],[easing],[fn])
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
相当于结合show(),hide();

$('#foo').toggle(showOrHide);

//相当于
if (showOrHide) {
  $('#foo').show();
} else {
  $('#foo').hide();
} 

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

$("p").slideDown("fast",function(){
   alert("Animation Done.");
 });

（2）slideUp([speed,[easing],[fn]])
以“滑动”的方式消失
（3）slideToggle([speed],[easing],[fn])
可以使匹配的元素以“滑动”的方式隐藏或显示。
3.淡入淡出效果

• fadeIn([speed],[easing],[fn])
  通过不透明度的变化来实现所有匹配元素的淡入效果

• fadeOut([speed],[easing],[fn])
  通过不透明度的变化来实现所有匹配元素的淡出效果

• fadeTo([[speed],opacity,[easing],[fn]])

  把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

• fadeToggle([speed],[easing],[fn])
  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果
  4.动画效果

• animate(params,[speed],[easing],[fn])

用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值，样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值，则会为该属性调用默认的动画形式。

$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

• stop([clearQueue],[jumpToEnd])
  停止所有在指定元素上正在运行的动画。
  如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行
  注：写在动画之后，防止疯狂点击时出现混乱

$("#go").click(function(){
  $(".block").animate({left: '+200px'}, 5000);
});

// 当点击按钮后停止动画
$("#stop").click(function(){
  $(".block").stop();
});