JQuery学习之路Part4：animate动画(隐藏/显示、淡入淡出、滑动、自定义动画、动画队列、停止动画)

一、隐藏/显示

1、显示

show([速度],[回调函数])

例：

显示所有p元素
$("p").show();

2、隐藏

hide([速度],[回调函数])

例：

隐藏所有p元素
$("p").hide();

3、显示和隐藏之间智能切换

相当于是一个开关 若是开着就将其关闭 若是关着就将其开启

toggle([速度],[回调函数])

注：不传入速度参数则无动画效果
传入字符串：
fast:200ms
normal:400ms
slow:600ms
填入错误按默认(normal)速度
传入数值： 毫秒(ms)

---

二、淡入淡出

1、淡入已隐藏的元素

$(selector).fadeIn([速度],[回调函数])

例：

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

2、淡出可见元素

$(selector).fadeOut([速度],[回调函数])

例：

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

3、元素淡出和淡入之间智能切换

$(selector).fadeToggle([速度],[回调函数])

例：

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

4、渐变为给定的不透明度

$(selector).fadeTo(速度,不透明度[,回调函数]);

例：

$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});

注：不传入速度参数则无动画效果
传入字符串：
fast:200ms
normal:400ms
slow:600ms
填入错误按默认(normal)速度
传入数值： 毫秒(ms)

---

三、滑动

1、向下滑动元素

$(selector).slideDown([速度],[回调函数]);

例：

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

2、向上滑动元素

$(selector).slideUp([速度],[回调函数]);

例：

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

3、向上和向下滑动元素之间智能切换

$(selector).slideToggle([速度],[回调函数]);

例：

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

注：不传入速度参数则无动画效果
传入字符串：
fast:200ms
normal:400ms
slow:600ms
填入错误按默认(normal)速度
传入数值： 毫秒(ms)

---

四、animate 动画

1、创建自定义动画animate

$(selector).animate(CSS样式[,速度],[回调函数])

注：
默认所有 HTML 元素都有一个静态位置且无法移动
如需对位置进行操作须首先把元素的position属性设置为relative fixed或absolute
例：

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

2、操作多个动画属性

多个属性之间用逗号(,)分隔

当使用 animate() 时必须使用Camel标记法书写所有的属性名
例如 使用paddingLeft而不是 padding-left 使用marginRight而不是margin-right 等等

例：

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

3、使用相对值(相对于元素的当前值)

属性值可使用当前值的相对值

例：

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

4、使用预定义值

共有三个参数：show hide toggle
show：显示
hide：隐藏
toggle：显示和隐藏之间进行切换

例：

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

5、使用队列(按顺序执行动画)

animate()是有顺序的 依次从上往下执行

例一：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

例二：

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

---

五、停止动画或效果

$(selector).stop([是否清除动画队列(后面的队列全停止)],[是否跳转到当前动画最终效果])

注：
stopAll 参数：默认为false
goToEnd参数：默认为false

例：

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

---