JQuery动画

---

toggle方法用于显示被隐藏的元素，并隐藏已显示的元素：

$("button").click(function(){
  $("p").toggle();
});

$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

---

淡出/淡入：

$("#div1").fadeIn();

  $("button").click(function(){
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
  });

脑补动作.JPG

  $("button").click(function(){
    $("#div1").fadeTo("slow",0.01);   // 调整了透明度
    $("#div2").fadeTo("slow",0.4);
  });

image.png

---

滑动元素

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

---

创建自定义动画

$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。

• 注意：默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。

---

>>> 可以用 animate() 方法来操作所有 CSS 属性吗？

• 是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
  同时，色彩动画并不包含在核心 jQuery 库中。
  如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

---

想要像修改CSS一样修改样式内容必须加上{}，并且使用 : 成对，然后用逗号隔开。

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