JQuery 淡出、 动画、显示/隐藏切换等效果

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/
欢迎任何形式的转载，未经作者同意，请保留此段声明！