jquery stopメソッド

TOPページに戻る > jquery入門

jquery stop()メソッド

stopメソッドは、セレクタで指定した要素の現在動作中のアニメーション処理を全て中止します
第一引数にtrueを指定するとキューに入れられたアニメーションを削除できます
第二引数にtrueを指定すると現在のアニメーションを完了して最後のコマにジャンプする
デェフォルトでは両方ともfalseです

デフォルト

$("セレクタ").stop();

キューに入れられたアニメーションを削除する

$("セレクタ").stop(true,false);

現在のアニメーションの最終コマに移動する

$("セレクタ").stop(false,true);

キューに入れられたアニメーションを削除し、現在のアニメーションの最終コマに移動する

$("セレクタ").stop(true,true);

指定したHTML要素の現在動作中のアニメーション処理を中止します

ボタンをクリックすると指定したdiv要素を1.5秒で設定した横幅と高さになり、STOPボタンを押すとアニメーションが途中で止まります。リセットボタンを押すと元の大きさに戻ります

jquery

$(function() {
	$("button#foo").click(function(){
	$("div#hoge").animate({width: "500px", height: "500px"},1500,"linear");
	});
	$("button#foo2").click(function(){
	$("div#hoge").stop();
	});
	$("button#foo3").click(function(){
	$("div#hoge").animate({width: "250px", height: "250px"},1500,"linear");
	});
});

css

#hoge{
 background-color: #FFCC99;
 width: 250px; height: 250px;
 font-size: 2em;
 }

html

<button id="foo">ボタン</button>
<button id="foo2">STOP</button>
<button id="foo3">リセット</button>
<div id="hoge"></div>

サンプル

ボタン STOP リセット