目的:為了 了解stop()的用法,舉個例子,直覺的方式看看。
實體:一個id="animater"的p包含了一段文字。 (以下用animator表示實物)
#動畫最終的完整效果: animater向右移動800px(這個完整的過程是動畫1),然後,字體逐漸變大(這個完整的過程是動畫2),然後,透明度逐漸降低到0(這個完整的過程是動畫3),然後透明度逐漸恢復到1 (這個完整的過程是動畫4),然後字體大小變成16px同時移動到距離左邊界200px的位置(這個完整的過程是動畫5).
操作:點擊不同id的button,觀看效果。
HTML程式碼:
<p id="animater"> stop()方法测试 </p>
<p id="button"> <input type="button" id="button1" value="stop()"/> <input type="button" id="button2" value="stop(true)"/> <input type="button" id="button3" value="stop(false,true)"/> <input type="button" id="button4" value="stop(true,true)"/> </p>
CSS程式碼:
#animater{ width: 150px; background:activeborder; border: 1px solid black; /*为了移动,需设置此属性*/ position: relative; }
jquery程式碼:
// 为了看效果,随意写的动画 $('#animater').animate({ 'right':-800 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal'); // 点击不同的button执行不同的操作 $('#button1').click(function(){ //默认参数是false,不管写一个false还是两个false还是没写false效果一样 $('#animater').stop(); }); $('#button2').click(function(){ //第二个参数默认false $('#animater').stop(true); }); $('#button3').click(function(){ $('#animater').stop(false,true); }); $('#button4').click(function(){ $('#animater').stop(true,true); });
##W3School上是這樣的說明的:
stop(stopAll,goToEnd)
描述 | |
---|---|
stopAll | #可選。規定是否停止被選元素的所有加入隊列的動畫。|
goToEnd | #可選。規定是否允許完成目前的動畫。 此參數只能在設定了 stopAll 參數時使用。
|
以上是jquery之stop()的用的詳細內容。更多資訊請關注PHP中文網其他相關文章!