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() | 对被选元素执行自定义动画 |
本文转自Work Hard Work Smart博客园博客，原文链接：http://www.cnblogs.com/linlf03/archive/2012/01/01/2309645.html，如需转载请自行联系原作者
