总结jQuery几种淡入淡出效果

原创

gzxiaomei 2020-05-29 10:21:56 博主文章分类：php ©著作权

©著作权归作者所有：来自51CTO博客作者gzxiaomei的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 拥有下面四种 fade 方法 fadeIn() fadeOut() fadeToggle() fadeTo()

1，jQuery fadeIn() 方法

用于淡入已隐藏的元素 $(selector).fadeIn(speed,callback); $("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000); });

2，jQuery fadeOut() 方法

jQuery fadeOut() 方法用于淡出可见元素 $(selector).fadeOut(speed,callback); $("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000); });

3，jQuery fadeToggle() 方法

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。www.cnmibee.com

如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

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

4，jQuery fadeTo() 方法

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。

$(selector).fadeTo(speed,opacity,callback);

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