( ! ) 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
#	Time	Memory	Function	Location
1	0.0000	365592	{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
#	Time	Memory	Function	Location
1	0.0000	365592	{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
#	Time	Memory	Function	Location
1	0.0000	365592	{main}( )	...\jquery_09.php:0

jQuery：预定义动画

显示和隐藏

突然显示：$(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();

[ 后天堂向上 | 好好学习天天向上 ]