六、jQuery中的动画

jq中的动画
1.显示效果
（1）显示show(动画的时间,动画完成函数function)
（2）隐藏hide(动画的时间,动画完成函数function)
（3）toggle(动画的时间,动画完成函数function)

$(".btn").click(function(){
    $(".btn").hide(3000);
    $(".btn").hide(3000,function(){
        alert("1");
    });
    $(".btn").show(3000);
    $(".btn").toggle(3000);
});

2.滑动效果

(1)上滑slideUp(动画的时间,动画完成函数function)
(2)下滑slideDown(动画的时间,动画完成函数function)
(3)slideToggle(动画的时间,动画完成函数function)

  $(".btn").click(function(){
          $(".btn").slideUp(200);
          $(".btn").slideDown(200);
          $(".btn").slideToggle(200);
      });

3.淡入淡出效果
(1)淡入fadeIn(动画的时间,动画完成函数function)
(2)淡出fadeOut(动画的时间,动画完成函数function)
(3)fadeToggle(动画的时间,动画完成函数function)

 $(".btn").click(function(){
         $(".btn").fadeOut(3000);
         $(".btn").fadeIn(3000);
         $(".btn").fadeToggle();
     });

4.透明度变化 fadeTo(动画的时间,透明度变化后的值,动画完成函数function)

 $(".btn").click(function(){
         $(".btn").fadeTo(1000,0.5);
     });

5.自定义动画
（1）animate(css3样式,时间,动画完成函数function)
（2）delay() 动画的延迟
（3）stop 停止当前正在运行的动画，进行下次动画

$(".btn").click(function () {
    $(".btn").delay(1000).animate({
        marginLeft: "700px",
        opacity: 0
    }, 1000, function () {
        //完成
    }).delay(1000).animate({
        marginLeft: "0px",
        opacity: 1
    }, 1000);
});
$("button").click(function(){
    $(".btn").stop();
});