这里是文章内页的小广告~

jQuery 效果 - 出现/消失

品味人生 • 发布于 2019-02-01 21:37:02

这个家伙很害羞,不想介绍自己!

fadeIn()/ fadeOut()/fadeToggle()   (淡入淡出效果)


语法:


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

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

案例
$(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);
});
});

fadeToggl()置透明度值后,块的容积依然存在,只是透明度改变。

hide()/show()


语法:


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

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

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

slideDown()/slideUp()/slideToggle() (滑动效果)


用法同上,但是只有上下的方向。