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 参数是该函数完成后所执行的函数名称。