首页 > web前端开发 > jQuery开发 > jQuery 效果 – 出现/消失
2014
12-31

jQuery 效果 – 出现/消失

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() (滑动效果)

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

最后编辑:
作者:yaqilover
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!