第8章　jQueryの効果

# **jQueryの効果 - ストップ**

***

jQuery `stop()`メソッドは、アニメーションや効果が終了する前にそれを停止するために使用されます。

この`stop()`メソッドは、スライドアニメーション、フェードアニメーション、カスタムアニメーションなど、すべてのjQueryエフェクト関数に対して機能します。

###構文：
```
$(selector).stop(stopAll,goToEnd);
```

* オプションのstopAllパラメータは、アニメーションキューもクリアするかどうかを指定します。デフォルトはfalseです。つまり、アクティブなアニメーションだけが停止され、キューに入れられたアニメーションは後で実行できます。
* オプションのgoToEndパラメータは、現在のアニメーションをすぐに完成させるかどうかを指定します。デフォルトはfalseです。

そのため、デフォルトでは、この`stop()`メソッドは選択した要素に対して実行されている現在のアニメーションを強制終了します。

次の例は、`stop()`パラメータなしの方法を示しています

#### 例
[sample8-1.html]

```
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown(5000);
  });
  $("#stop").click(function(){
    $("#panel").stop();
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 3px;
}
#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
  <button id="stop">Stop sliding</button>

<div id="flip">Click to slide down panel</div>
  <div id="panel">Hello world!</div>

</body>
</html>
```

#### 実行結果
<pre><span class="nocode">
<iframe src="javascript: '<html><script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js&quot;></script>
<script> 
$(document).ready(function(){
  $(&quot;#flip&quot;).click(function(){
    $(&quot;#panel&quot;).slideDown(5000);
  });
  $(&quot;#stop&quot;).click(function(){
    $(&quot;#panel&quot;).stop();
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  font-size: 18px;
  text-align: center;
  background-color: #555;
  color: white;
  border: solid 1px #666;
  border-radius: 3px;
}

#panel {
  padding: 50px;
  display: none;
}
</style><body>

<button id=&quot;stop&quot; style=&quot;font-size:inherit;margin:10px 0px&quot;>Stop sliding</button>

<div id=&quot;flip&quot;>Click to slide down panel</div>
<div id=&quot;panel&quot;>Hello world!</div>

</body></html>'" width="800"></iframe>

</span>
</pre>

<br>

> **jQuery効果のリファレンス**
>>すべてのjQueryエフェクトの概要については、 jQueryエフェクトのリファレンスをご覧ください。<br>
<a href="http://semooh.jp/jquery/api/effects/" target="_blank">http://semooh.jp/jquery/api/effects/</a>

***

> **練習**
>> **問題**[Ex8-1.html]

content

第8章 jQueryの効果 - ストップ

第8章　jQueryの効果 - ストップ