上記のサンプルはボタン(= hover処理を行う)にマウスカーソルを高速で載せたり外したりすることを想定。
stop()の使い方
- stop()なし
- アニメーションは前のアニメーションが終了しないと実行されないのでアニメーションが渋滞する(= 未実行のアニメーションがqueueに溜まる)。マウスカーソルを載せる&外すのを止めた後もqueueが空になるまでアニメーションが継続する。
- stop(true)
- マウスカーソルを載せる(or 外す)とアニメーションがキャンセルされる(= queueが破棄されるので以降のアニメーションは実行されない)。用途にもよるかもしれないが感覚的に一番自然だと思えるのはこのパターン(だと思う)。
- stop(true, true)
- マウスカーソルを載せる(or 外す)とアニメーションが途中経過をすっ飛ばして最後まで飛ぶ(= animateで指定したCSSがすぐに反映される)。その後、キャンセルとなる(= queueが破棄されるので以降のアニメーションは実行されない)。
詳しくは公式ドキュメントを参照。
.stop() | jQuery API Documentatio
ちなみに、animate()はoptionsで”queue”を指定すればアニメーションを入れるqueueを指定できる。stop()ではその名前を指定してアニメーションを止める(= queueを破棄する)ことも可能(以下では割愛)。
目次
ソースコード
HTML
stop()なし
stop(true)
stop(true, true)
CSS
body {
margin: 20px;
background-color: #eee;
}
button {
border: none; /* 枠線を消す */
outline: none; /* クリックしたときに表示される枠線を消す */
width: 200px;
height: 80px;
background-color: white;
}
jQuery
$(function(){
var duration = 1000;
/*
stop()なし
高速でマウスカーソルを載せたり外したりを繰り返すと
アニメーションが渋滞する(= queueに溜まる)
*/
$('.button1').hover(
function() {
$(this).animate({
backgroundColor : '#ff0000'
}, duration);
},
function() {
$(this).animate({
backgroundColor : '#ffffff'
}, duration);
}
);
/*
stop(true)
アニメーションの途中でマウスカーソルを載せる(or 外す)と
アニメーションがキャンセルされる
*/
$('.button2').hover(
function() {
$(this).stop(true).animate({
backgroundColor : '#ff0000'
}, duration);
},
function() {
$(this).stop(true).animate({
backgroundColor : '#ffffff'
}, duration);
}
);
/*
stop(true, true)
アニメーションの途中でマウスカーソルを載せる(or 外す)と
アニメーションがキャンセルされる
また、キャンセルした時点で途中経過をすっ飛ばしてアニメーションが最後まで飛ぶ
*/
$('.button3').hover(
function() {
$(this).stop(true, true).animate({
backgroundColor : '#ff0000'
}, duration);
},
function() {
$(this).stop(true, true).animate({
backgroundColor : '#ffffff'
}, duration);
}
);
});