15.jQuery淡入淡出效果

Posted 2021-11-27 wangdh666

fade方法包括四个：

（1）fadeIn（speed，callback）：淡入的方法，speed代表淡入的速度，可以是slow，fast，毫秒，不填等

例如：

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

（2）fadeOut（speed，callback）方法：淡出的方法，参数的意义如上。

例如：

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

（3）fadeToggle（speed，callback）方法：可以同时切换淡入淡出。

例如：

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

（4）fadeTo（speed,opacity,callback）方法：允许渐变为给定的不透明度（值介于 0 与 1 之间），相当于不是淡入或者淡出完全不见，而是淡出到一个程度，有了一个透明度。

例如：

$("button").click(function(){

$("#div1").fadeTo("slow",0.15);

$("#div2").fadeTo("slow",0.4);

$("#div3").fadeTo("slow",0.7);

});