1、jQuery slideToggle() 表示简单的 slide panel 效果。
< html > < head > < script type="text/javascript"
src="jquery-1.7.1.min.js"></ script >
< script type="text/javascript">
$(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </ script > < style type="text/css">
div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid
1px #c3c3c3; } div.panel { height:70px; display:none; } </ style > </ head > < body > < p class="flip">请点击这里</ p > < br /> < br /> < div class="panel"
style="width:200px"> < p >JQuery</ p > < p >爱,别太认真</ p > </ div > |
2、jQuery fadeTo()表示简单的淡出效果。
< html > < head > < script type="text/javascript"
src="jquery-1.7.1.min.js"></ script >
< script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); }); </ script > </ head > < body > < div id="test"
style="background:yellow;width:300px;height:300px"> < button type="button">点击这里查看淡出效果</ button > </ div > </ body > </ html > |
3、jQuery animate() 动画效果
< html > < head > < script type="text/javascript"
src="jquery-1.7.1.min.js"></ script >
< script type="text/javascript">
$(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:500},"slow"); $("#box").animate({width:500},"slow"); $("#box").animate({height:150},"slow"); $("#box").animate({width:150},"slow"); }); }); </ script >
</ head > < body > < p >< a href="#"
id="start">Start Animation</ a ></ p > < div id="box" style="background:red;height:150px;width:150px;position:relative"> </ div > </ body > </ html > |
4、显示/隐藏切换效果 $("p").toggle();
html> < head > < script type="text/javascript"
src="jquery-1.7.1.min.js"></ script >
< script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </ script > </ head > < body > < button type="button">显示/隐藏切换效果</ button > < p >This
is a paragraph with little content.</ p > < p >This
is another small paragraph.</ p > </ body > </ html > |
5、jQuery 效果
函数 | 描述 |
---|---|
$(selector).hide() | 隐藏被选元素 |
$(selector).show() | 显示被选元素 |
$(selector).toggle() | 切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() | 向下滑动(显示)被选元素 |
$(selector).slideUp() | 向上滑动(隐藏)被选元素 |
$(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() | 淡入被选元素 |
$(selector).fadeOut() | 淡出被选元素 |
$(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
$(selector).animate() | 对被选元素执行自定义动画 |