jQuery效果－隱藏、顯示、切換、滑動、淡入淡出以及動畫。
阿新 • • 發佈：2019-02-03
<!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>
<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>