( ! ) Warning: include(): http:// wrapper is disabled in the server configuration by allow_url_include=0 in D:\www\up\jQuery\jquery_09.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000365768{main}( )...\jquery_09.php:0

( ! ) Warning: include(http://pub.houheaven.com/Nav02/Nav_deep2.htm): failed to open stream: no suitable wrapper could be found in D:\www\up\jQuery\jquery_09.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000365768{main}( )...\jquery_09.php:0

( ! ) Warning: include(): Failed opening 'http://pub.houheaven.com/Nav02/Nav_deep2.htm' for inclusion (include_path='.;C:\php\pear') in D:\www\up\jQuery\jquery_09.php on line 21
Call Stack
#TimeMemoryFunctionLocation
10.0000365768{main}( )...\jquery_09.php:0

显示和隐藏

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

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


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <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,回调函数,在指定的动画结束时调用的函数,可以省略。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <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 均为快选参数,可以省略。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <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。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <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 均为快选参数,可以省略。


  • 最初效果
  • 最终效果
  • HTML 代码
  • jQuery 代码
  • <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();


显示框架
显示框架
显示框架
显示框架