jQueryの停止アニメーション

jQuery アニメーションの停止

jQuery stop() メソッドは、アニメーションやエフェクトを完了前に停止するために使用されます。

stop() メソッドは、スライド、フェード、カスタムアニメーションを含むすべての jQuery エフェクト関数で動作します。

構文:

$(selector).stop(stopAll,goToEnd);

オプションの stopAll パラメーターは、アニメーションキューをクリアするかどうかを指定します。デフォルトは false で、アクティブなアニメーションのみを停止し、キューに入れられたアニメーションを逆方向に実行できます。

オプションの goToEnd パラメーターは、現在のアニメーションをすぐに完了するかどうかを指定します。デフォルトは false です。

したがって、デフォルトでは、stop() は選択した要素に指定されている現在のアニメーションをクリアします。

次の例は、パラメータなしの stop() メソッドを示しています。次のセクション

新しいファイル

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Panel</title>
 <style type="text/css">
 * {
 margin: 0;
 padding: 0;
 }
 body {
 font-size: 13px;
 line-height: 130%;
 padding: 60px
 }
 #panel {
 width: 60px;
 border: 1px solid #0050D0;
 height: 22px;
 overflow: hidden;
 }
 .head {
 padding: 5px;
 background: #96E555;
 cursor: pointer;
 width: 300px;
 }
 .content {
 padding: 10px;
 text-indent: 2em;
 border-top: 1px solid #0050D0;
 display: block;
 width: 280px;
 }
 </style>
 <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
 <script type="text/javascript">
 $(function(){
 $("button:eq(0)").click(function(){
 $("#panel").animate({height:"150" }, 1000).animate({width:"300" },
 1000).hide(2000).animate({height:"show", width:"show", opacity:"show" }, 1000).animate({height:"500"},
 1000);
 });

 //stop([clearQueue][,gotoEnd]);
 //语法结构
 $("button:eq(1)").click(function(){
 $("#panel").stop();//停止当前动画，继续下一个动画
 });
 $("button:eq(2)").click(function(){
 $("#panel").stop(true);//清除元素的所有动画
 });
 $("button:eq(3)").click(function(){
 $("#panel").stop(false, true);//让当前动画直接到达末状态 ，继续下一个动画
 });
 $("button:eq(4)").click(function(){
 $("#panel").stop(true, true);//清除元素的所有动画，让当前动画直接到达末状态
 });

 })
 </script>
</head>
<body>
<button>开始一连串动画</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>

<div id="panel">
 <h5 class="head">什么是jQuery?</h5>

 <div class="content">
 jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
 </div>
</div>

</body>
</html>

提出するリセットコード

自動運転

全画面表示