jQuery-（7）动画

创建自定义动画

语法：

$(selector).animate({params},speed,callback);

（1）params：定义形成动画的 CSS 属性。
（2）speed ：效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
（3）callback ：动画完成后所执行的函数名称
示例

$("button").click(function(){
  $("div").animate({left:'250px'});
});

---

操作多个属性

 $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });

---

使用相对值

在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

---

使用预定义的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

---

使用队列功能

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

---

停止动画

语法:

$(selector).stop(stopAll,goToEnd);

（1）stopAll ：可选参数，是否应该清除动画队列，默认是 false，即仅停止活动的动画。
（2）goToEnd ：可选参数，是否立即完成当前动画。默认是 false。
示例：

$("#stop").click(function(){
  $("#panel").stop();
});

---

Callback

   <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").hide("slow",function(){
                    alert("段落现在被隐藏了");
                });
            });
        });
    </script>

---

方法链接

  <script>
        $(document).ready(function()
        {
            $("button").click(function(){
                $("#p1").css("color","red").slideUp(2000).slideDown(2000);
            });
        });
    </script>