第九节 效果

一.基本

1.show()
显示隐藏的匹配元素。
2.hide()
隐藏显示的元素
3.toggle()
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

二.滑动

1.slideDown([speed],[easing],[fn])
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数
2.slideUp([speed,[easing],[fn]])
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调
函数。

$('h1').click(function(){
    var d = $(this).next().css('display');
    if(d=='block'){
        $(this).next().slideUp(1000);
    }else{
        $(this).next().slideDown(1000);
    }       
});

3.slideToggle([speed],[easing],[fn])
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

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

三.淡入淡出

1.fadeIn([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
2.fadeOut([speed],[easing],[fn])
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

$('h1').click(function(){
    var d = $(this).next().css('display');
    if(d=='block'){
        $(this).next().fadeOut(1000);
    }else{
        $(this).next().fadeIn(1000);
    }       
});

3.fadeTo([[speed],opacity,[easing],[fn]])
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

$('h1').click(function(){
    var d = $(this).next().css('opacity');
    if(d=='1'){
        $(this).next().fadeTo(1000,0.5);
    }else{
        $(this).next().fadeTo(1000,1);
}); 

四.自定义

1.animate
用于创建自定义动画的函数。
这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});