要約
jQueryとjQueryUIを用いて,マウスオーバーすると色が変わり,マウスアウトすると元に戻るアニメをつけようとしていたところ,.stop()
の付け方によっては無限の繰り返しが発生してしまうことがわかりました.しかし,考えても原因がわかりません.
マウスを動かしていないのにmouseoverイベントが繰り返し発生しているようなのですが,それはおかしなことだと思います.
これまでに試したこと
ブラウザはChromeとedgeで試してみましたが,結果は変わりませんでした.
読み込むjQueryのバージョンを変えてみましたが,結果は変わりませんでした.
コード
CDNを使って,HTMLファイル単体で再現できるようにしてみました.
下記HTMLファイルをテキストエディタに貼り付け,ブラウザで開いてください.
マウスオーバーして,マウスをそのままにすると無限ループが発生することがあります.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>無限ループするanimate</title>
<style>
#buttons2 button p:first-child {
position: absolute;
}
#buttons2 button p:nth-child(2) {
opacity: 0;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
</head>
<body>
<div id="buttons2">
<button>
<p>hogehoge</p>
<p>mokemoke</p>
</button>
</div>
<script>
var duration = 300;
$('#buttons2 button')
.on('mouseover', function(){
var $btn = $(this);
$btn.animate ({
backgroundColor: '#faee00',
color: '#000'
}, duration);
$btn.find('p:first-child').animate({opacity: 0}, duration);
$btn.find('p:nth-child(2)').animate({opacity: 1}, duration);
})
.on('mouseout', function(){
var $btn = $(this);
$btn.animate({
backgroundColor: '#fff',
color: '#01b169',
}, duration);
$btn.find('p:first-child').stop(true).animate({opacity: 1}, duration);
$btn.find('p:nth-child(2)').stop(true).animate({opacity: 0}, duration);
});
</script>
</body>
</html>
質問
このような無限ループが発生する原因を教えていただきたいです.
よろしくお願いいたします.