JQuery（学习笔记二）JQuery常用效果

逃离我推掉我的手 2022-05-14 12:15 195阅读 0赞

# 一、隐藏/显示 #

## （1）使用hide/show ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>//speed是时间，callback是回调方法</p> <p>$(<em>selector</em>).hide(<em>speed,callback</em>);<br> $(<em>selector</em>).show(<em>speed,callback</em>);</p> </td> 
  </tr> 
 </tbody> 
</table>

例子：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$("button").click(function(){ </p> <p>&nbsp; &nbsp; $("p").hide(1000);</p> <p>});</p> </td> 
  </tr> 
 </tbody> 
</table>

## （2）使用toggle ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$(<em>selector</em>).toggle(<em>1000,function(){ </em></p> <p>&nbsp; &nbsp;//todo:</p> <p><em>}</em>);</p> </td> 
  </tr> 
 </tbody> 
</table>

# 二、淡入淡出 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>//淡入</p> <p>$(<em>selector</em>).fadeIn(<em>speed,callback</em>);</p> <p>//淡出</p> <p>$(<em>selector</em>).fadeOut(<em>speed,callback</em>);</p> <p>//淡入淡出</p> <p>$(<em>selector</em>).fadeToggle(<em>speed,callback</em>);</p> <p>//&nbsp;opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）</p> <p>$(<em>selector</em>).fadeTo(<em>speed,opacity,callback</em>);</p> </td> 
  </tr> 
 </tbody> 
</table>

# 三、滑动方法 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>//向下滑动元素</p> <p>$(<em>selector</em>).slideDown(<em>speed,callback</em>);</p> <p>//向上滑动元素</p> <p>$(<em>selector</em>).slideUp(<em>speed,callback</em>);</p> <p>//向下滑动元素/向上滑动元素</p> <p>$(<em>selector</em>).slideToggle(<em>speed,callback</em>);</p> </td> 
  </tr> 
 </tbody> 
</table>

# 四、动画 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>$(<em>selector</em>).animate({ <em>params</em>}<em>,speed,callback</em>);</p> <p>//例子，把 &lt;div&gt; 元素往右边移动了 250 像素</p> <p>$("button").click(function(){ </p> <p>&nbsp; &nbsp; $("div").animate({left:'250px'});</p> <p>});</p> <p>&nbsp;</p> <p>//操作多个属性</p> <p>$("button").click(function(){ </p> <p>$("div").animate({ </p> <p>left:'250px',</p> <p>opacity:'0.5',</p> <p>height:'150px',</p> <p>width:'150px' });</p> <p>});</p> <p>&nbsp;</p> <p>//操作多个标签</p> <p>$("button").click(function(){ </p> <p>var div=$("div");</p> <p>div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow");</p> <p>});</p> </td> 
  </tr> 
 </tbody> 
</table>

# 五、停止动画 #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>//可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。</p> <p>//可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。</p> <p>//默认stop() 会清除在被选元素上指定的当前动画</p> <p>$(<em>selector</em>).stop(<em>stopAll,goToEnd</em>);</p> <p>//停止id为panel的动画</p> <p>$("#stop").click(function(){ </p> <p>$("#panel").stop();</p> <p>});</p> </td> 
  </tr> 
 </tbody> 
</table>

# 六、链(Chaining) #

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>//对标签进行多个动画</p> <p>// id为p1的先变红然后上滑动画接着下滑动画</p> <p>$("#p1").css("color","red").slideUp(2000).slideDown(2000);</p> </td> 
  </tr> 
 </tbody> 
</table>