小拼:jQuery淡入淡出、隐藏显示、消失出现效果大全

摘要jQuery淡入淡出、隐藏显示、消失出现效果,hide()/show() fadeIn()/ fadeOut()/fadeToggle() slideDown()/slideUp()/slideToggle()

jQuery淡入淡出效果

隐藏出现效果:hide()/show()

语法:

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

实例:

  1. $(document).ready(function(){
  2.   $("p").click(function(){
  3.     $("#hide").hide();
  4.     $("#show").show("fast");
  5.     $("#toggle").toggle(600)
  6.   });
  7. });

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

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

语法:

$(selector).fadeTo(speed,callback);//speed可取值:"slow"、"fast" 或毫秒。
$(selector).fadeTo(speed,opacity,callback);//fadeToggle()有透明度属性(值介于 0 与 1 之间)

实例:

  1. $(document).ready(function(){
  2.   $("p").click(function(){
  3.     $("#hide").hide();
  4.     $("#show").show("fast");
  5.     $("#toggle").toggle(600)
  6.   });
  7. });

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

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

给我留言

图片 表情