您所在的位置:小祥子 » 编程 » JavaScript » 正文

jQuery淡入淡出效果–出现/消失

时间:2015-01-31 编辑:佚名 来源:互联网

fadeIn()/ fadeOut()/fadeToggle()   (淡入淡出效果)
 
语法:

$(selector).fadeTo(speed,callback);//speed可取值:"slow"、"fast" 或毫秒。
$(selector).fadeTo(speed,callback);//speed可取值:"slow"、"fast" 或毫秒。

$(selector).fadeTo(speed,opacity,callback);//fadeToggle()有透明度属性(值介于 0 与 1 之间)
$(selector).fadeTo(speed,opacity,callback);//fadeToggle()有透明度属性(值介于 0 与 1 之间)

案例


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

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

fadeIn( ),fadeOut( )会让div块容积消失;


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


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

fadeToggl()置透明度值后,块的容积依然存在,只是透明度改变。
 
hide()/show()
 
语法:
 


$(selector).toggle(speed,callback);

 
$(selector).toggle(speed,callback);

案例


$(document).ready(function(){
  $("p").click(function(){
    $("#hide").hide();
    $("#show").show("fast");
    $("#toggle").toggle(600)
  });
});

 
$(document).ready(function(){  $("p").click(function(){    $("#hide").hide();    $("#show").show("fast");     $("#toggle").toggle(600)  });});

如果设置了速度是毫秒值,被事件激发的块:
 块(有宽、高值且不是100%,没有定位)——默认从左上角开始出现/从右下角开始隐藏;
 块(有宽、高值且不是100%,有定位)——定位的坐标点开始出现/从反向位置隐藏;
 块(有高值,宽是100%)——默认从上开始出现/从下开始隐藏;
 
slideDown()/slideUp()/slideToggle() (滑动效果)
 
用法同上,但是只有上下的方向。
 

关键词:jQuery 效果 出现 消失