jQuery：预定义动画

显示和隐藏

突然显示：$(Content).show();

突然隐藏：$(Content).hide();


  • <input type="button" value="隐藏" name="bn01" />
  • <input type="button" value="显示" name="bn02" />
  • <div></div>

<div> CSS：

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("input[name=bn01]").click(function(){$("div").hide();});
  • $("input[name=bn02]").click(function(){$("div").show();});

缓慢显示：$(Content).show(speed,fn);

缓慢隐藏：$(Content).hide(speed,fn);

参数说明：

speed，指定时间为毫秒数或者为预定义的fast、normal、slow，在指定的时间内，元素的大小和不透明度会平缓地降到0，然后把元素的 display 设置为 none。

fn，回调函数，在指定的动画结束时调用的函数，可以省略。


  • <input type="button" value="隐藏" name="bn03" />
  • <input type="button" value="显示" name="bn04" />
  • <div></div>

<div> CSS：

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("input[name=bn03]").click(function(){$("div").hide(500);});
  • $("input[name=bn04]").click(function(){$("div").show(500);});

淡入和淡出

淡入：$(Content).fadeIn(speed,fn);

淡出：$(Content).fadeOut(speed,fn);

提示：speed 和 fn 均为快选参数，可以省略。


  • <input type="button" value="淡出" name="bn05" />
  • <input type="button" value="淡入" name="bn06" />
  • <div></div>

<div> CSS：

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("input[name=bn05]").click(function(){$("div").fadeOut('slow');});
  • $("input[name=bn06]").click(function(){$("div").fadeIn('fast');});

自定义：$(Content).fadeTo(speed,opacity,fn);

参数说明：opacity，不透明度，取值范围为0.0到1.0。


  • <input type="button" value="平缓褪色到 0.5" name="bn07" />
  • <input type="button" value="还原透明度到 1.0" name="bn08" />
  • <div></div>

<div> CSS：

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("input[name=bn07]").click(function(){$("div").fadeTo(600,0.5);});
  • $("input[name=bn08]").click(function(){$("div").fadeTo(600,1.0);});

滑上和滑下

滑上：$(Content).slideUp(speed,fn);

滑下：$(Content).slideDown(speed,fn);

提示：speed 和 fn 均为快选参数，可以省略。


  • <input type="button" value="滑上" name="bn09" />
  • <input type="button" value="滑下" name="bn10" />
  • <div></div>

<div> CSS：

width:600px; height:150px; background:#bbb; border:1px solid #666;

  • $("input[name=bn09]").click(function(){$("div").slideUp();});
  • $("input[name=bn10]").click(function(){$("div").slideDown();});

使动画停止

$(Content).stop();


使动画延迟

$(Content).delay();