2017/3/10 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()	对被选元素执行自定义动画