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();