jQuery动画-淡入和淡出

jQuery fadeOut()

• $("p").fadeOut();
• $("p").fadeOut("slow");
• $("p").fadeOut(3000);
• $("p").fadeOut(1000, "linear");
• $("p").fadeOut(2000, function() {

alert("隐藏完毕!");

});

• $("p").fadeOut({

duration: 1000

});

• 字符串 'fast' 和 'slow' 分别代表200和600毫秒的延时。如果提供任何其他字符串，或者这个duration参数被省略，那么默认使用400毫秒的延时
• fadeOut()函数用于隐藏所有匹配的元素，并带有淡出的过渡动画效果
• hide()、show()、slideDown()、slideUp()是通过 display:none/block来实现的；fadeOut() 是通过透明度的方法，opacity=0，这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

---

jQuery fadeIn()

• 用法与fadeOut()相似
• .fadeIn( [duration ], [ complete ] )
• duration：指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。
• 淡入的动画原理：操作元素的不透明度从0%逐渐增加到100%

---

jQuery fadeToggle()

• 用法与之前也学过toggle()、slideToggle() 也是类似的处理方式
• .fadeToggle( [duration ] ,[ complete ] )
• .fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

---

jQuery fadeTo()

• 淡入淡出fadeIn与fadeOut都是修改元素样式的opacity属性，但是他们都有个共同的特点，变化的区间要么是0，要么是1
• .fadeTo( duration, opacity ,callback)
• $("p").fadeTo("slow", 0.5);
• $("p").fadeTo(1000, 0.5, function() {

alert('完成');

});

• 必需的 duration参数规定效果的时长，它可以取以下值："slow"、"fast" 或毫秒。fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。可选的 callback 参数是该函数完成后所执行的函数名称。