jQuery 「エフェクト」アニメーションを停止する
実行中のアニメーションを停止します。第1引数は、fxキューをクリアするかどうかをtrueまたはfalseで指定します。trueを指定すると、fxキューに登録されている他のアニメーション効果もクリアされ、実行されなくなります。第2引数は、アニメーションを完了させるかどうかをtrueまたはfalseで指定します。trueを指定すると、停止と同時に各CSSプロパティの値がアニメーションの最終的な到達点にセットされます。
書式
$("対象要素").stop([キューのクリア],[アニメーション完了]);$('img').stop();サンプル
アニメーションを停止する
<html>
<head>
<meta charset="UTF-8">
<title>テストページ</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<style>
body{
background-color: #000000;
}
img{
position: absolute;
width: 150px;
margin: 5px;
}
</style>
</head>
<body>
<button id="move">進む</button>
<button id="stop">止まる</button>
<button id="return">戻る</button>
<img src="./images/4650840_s.jpg">
<script>
$(document).ready(function(){
$("#move").on('click',function(){
$("img").animate({left: "+=400px"},2000);
});
$("#stop").on('click',function(){
$("img").stop();
});
$("#return").on('click',function(){
$("img").animate({left: "-=200px"},2000);
});
});
</script>
</body>
</html>
