JQuery的动画效果【四】

一、与动画有关的方法
在CSS样式中的功能：
style="display: none;" 隐藏元素

style="display: block;"  显示元素

1. 元素的显示与隐藏
show(speed ,fn) 以动画的方式显示元素
speed： 显示的速度，以毫秒为单位。也可以使用常量：fast, normal, slow
fn: 回调函数，动画执行完毕以后马上自动调用的函数

hide(speed ,fn)  以动画的方式隐藏元素
toggle(speed ,fn) 开关显示/隐藏

2. 元素的滑动显示与隐藏
slideDown(speed, fn) 向下拉的动画
slideUp(speed ,fn) 向上拉的动画
slideToggle(speed ,fn)  上拉或下拉开关

3. 元素的淡入淡出的显示与隐藏
fadeIn(speed ,fn) 淡入动画
fadeOut(speed ,fn)  淡出动画 
fadeToggle(speed ,fn) 淡入或淡出开关

4. 动画案例的演示：1张图片，9个按钮，分别点击每个按钮，调用不同的方法
<input type="button" value="显示" id="b1" />
        <input type="button" value="隐藏" id="b2" />
        <input type="button" value="显示/隐藏切换" id="b3" />
        <input type="button" value="下拉" id="b4" />
        <input type="button" value="上拉" id="b5" />
        <input type="button" value="下拉/上拉切换" id="b6" />
        <input type="button" value="淡入" id="b7" />
        <input type="button" value="淡出" id="b8" />
        <input type="button" value="淡入/淡出切换" id="b9" />
        <script type="text/javascript">
$(function() {
    //显示
    $("#b1").click(function(){
        $("#girl").show(3000, function(){
            alert("美女出来了");
        });
    });
                
                //隐藏
    $("#b2").click(function(){
        $("#girl").hide("slow");
    });
                
                //显示/隐藏切换
    $("#b3").click(function(){
        $("#girl").toggle(2000);
    });
                
                //下拉
    $("#b4").click(function(){
        $("#girl").slideDown(2000);
    });
    
    //上拉
    $("#b5").click(function(){
        $("#girl").slideUp(2000);
    });
    
    $("#b6").click(function(){
        $("#girl").slideToggle(2000);
    });
                
                //淡入
    $("#b7").click(function(){
        $("#girl").fadeIn(2000);
    });

    $("#b8").click(function(){
        $("#girl").fadeOut(2000);
    });

    $("#b9").click(function(){
        $("#girl").fadeToggle(2000);
    });
});
        </script>
二、案例：定时广告
1. 需求：
1) 2秒以后，广告向下滑动，滑动时间2.5秒
2) 滑完以后在回调函数中，再等3秒以后，向上滑动2.5秒。
3) 可以使用其它的动画方式。

2. 代码：
<script type="text/javascript">
  $(function(){
      //过3秒拉出一个广告
      setTimeout(function(){
          //下拉时间2秒
          $("#ad").slideDown(2000, function(){
              //等3秒再执行
              setTimeout(function(){
                  //拉回去，时间2秒
                  $("#ad").slideUp(2000);
              }, 3000);
          });
      }, 3000);
  });
</script>