1. 程式人生 > >jQuery效果-隱藏、顯示、切換、滑動、淡入淡出以及動畫。

jQuery效果-隱藏、顯示、切換、滑動、淡入淡出以及動畫。

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    $("div").animate({left:'100px'},5000);
    $("div").animate({fontSize:'3em'},5000);
  });
  
  $("#stop").click(function(){
    $("div").stop();
  });



  $("#stop2").click(function(){
    $("div").stop(true);
  });



  $("#stop3").click(function(){
    $("div").stop(true,true);
  });

  
});
</script> 
</head>
<body>


<button id="start">開始</button>
<button id="stop">停止</button>
<button id="stop2">停止所有</button>
<button id="stop3">停止但要完成</button>
<p><b>"開始"</b> 按鈕會啟動動畫。</p>
<p><b>"停止"</b> 按鈕會停止當前活動的動畫,但允許已排隊的動畫向前執行。</p>
<p><b>"停止所有"</b> 按鈕停止當前活動的動畫,並清空動畫佇列;因此元素上的所有動畫都會停止。</p>
<p><b>"停止但要完成"</b> 會立即完成當前活動的動畫,然後停下來。</p> 


<div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>


</body>
</html>