jquery之stop()的用法

工作中遇到過的實際案例:

1、我在項目里做的一個下拉菜單,當鼠標移上去的時候就菜單顯示,當鼠標離開的時候菜單隱藏

如果我快速不斷地將鼠標移入移出菜單(即,當菜單下拉動畫未完成時,鼠標又移出了菜單)就會產生“動畫積累",當鼠標停止移動后,積累的動畫還會持續執行,直到動畫序列執行完畢。
2、項目里ng-click 點擊事件,然后讓一個div彈窗淡入淡出,(即,當連續多次點擊按鈕觸發事件,就會產生點擊事件多次點擊后)就會產生“動畫積累",當多次點擊按鈕完成后,積累的動畫還會持續執行,直到動畫序列執行完畢。
解決方法:在寫動畫效果的代碼前加入stop(truetrue),這樣每次快速的移入移出菜單,就正常了,當移入一個菜單的時候,停止所有加入隊列的動畫,但是完成當前的動畫(跳至當前動畫的最終效果位置)
 $scope.sendMsg = function($event){$event.stopPropagation();$('.add').stop(true,true).fadeIn(500);$('.add').stop(true,true).delay(2000).fadeOut(1000);}

目的:為了 了解stop()的用法,舉個例子,直觀的方式看看。

實物:一個id="animater"的div包含了一段文字。(以下用animator表示實物)

動畫最終的完整效果:?animater向右移動800px(這個完整的過程是動畫1),然后,字體逐漸變大(這個完整的過程是動畫2),然后,透明度逐漸降低到0(這個完整的過程是動畫3),然后透明度逐漸恢復到1(這個完整的過程是動畫4),然后字體大小變為16px同時移動到距離左邊界200px的位置(這個完整的過程是動畫5).

操作:點擊不同id的button,觀看效果。

HTML代碼:

?

復制代碼
       <div id="animater">stop()方法測試</div>
        <div 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)"/> </div>
復制代碼

?

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 參數時使用。

我的理解:

stopAll 為false時,不停止被選元素所有加入隊列的動畫,僅停止當前的動畫。stopAll為true時,停止所有加入隊列的動畫(如goToend為true,直接跳到當前動畫的最終效果)。

goToend為false時,不允許直接跳到當前動畫的最終效果(應該就是所謂的完成當前的動畫吧),goToend為true時,允許直接跳到完成當前動畫的最終末尾效果

?

每次運行頁面,animater運動時,點擊不同button,看到如下不同的效果(animater處在動畫1時點擊):

點擊按鈕button1(stop()),由于兩個參數都是false。所以點擊發生時,animater沒有跳到當前動畫(動畫1)的最終效果,而直接進入動畫2,然后動畫3,4,5.直至完成整個動畫。

點擊按鈕button1(stop(true)),由于第一個是true,第二個是false,所以animater立刻全部停止了,動畫不動了。

點擊按鈕button1(stop(false,true)),由于第一個是false,第二個是true,所以點擊發生時,animater身處的當前動畫(動畫1)停止并且animater直接跳到當前動畫(動畫1)的最終末尾效果位置,接著正常執行下面的動畫(動畫2,3,4,5),直至完成整個動畫。

點擊按鈕button1(stop(true,true)),由于兩個都是true,所以點擊發生時,animater跳到當前動畫(動畫1)的最終末尾效果位置,然后,全部動畫停止。

文章轉自:http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html

?

轉載于:https://www.cnblogs.com/sxz2008/p/6322270.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/394092.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/394092.shtml
英文地址,請注明出處:http://en.pswp.cn/news/394092.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

leetcode1123. 最深葉節點的最近公共祖先(dfs)

給你一個有根節點的二叉樹&#xff0c;找到它最深的葉節點的最近公共祖先。 回想一下&#xff1a; 葉節點 是二叉樹中沒有子節點的節點 樹的根節點的 深度 為 0&#xff0c;如果某一節點的深度為 d&#xff0c;那它的子節點的深度就是 d1 如果我們假定 A 是一組節點 S 的 最近…

sed空格替換成回車_【一題試水平】 利用sed命令將test.txt中所有的回車替換成空格?...

題目背景&#xff0c;這個題也很有年頭了&#xff0c;看似簡單&#xff0c;實則坑很大&#xff0c;good luck! 先不要看答案 看看自己能寫出多少方法.方法1 把每一行內容追加到Hold Space中&#xff0c;最后1行弄回到Pattern space中.然后進行替換基礎版[rootoldboyedu-show01 …

github 和git_學習編碼時如何學習Git和GitHub

github 和gitby Iago Rodrigues通過Iago Rodrigues 學習編碼時如何學習Git和GitHub (How you can learn Git and GitHub while you’re learning to code) In this article, I’ll give you some hints about how to become a Git/GitHub ninja. Also, as a bonus, I’ll show…

015_ICMP專項研究監控

一、數據demo cat /proc/net/snmp Ip: Forwarding DefaultTTL InReceives InHdrErrors InAddrErrors ForwDatagrams InUnknownProtos InDiscards InDelivers OutRequests OutDiscards OutNoRoutes ReasmTimeout ReasmReqds ReasmOKs ReasmFails FragOKs FragFails FragCreates …

leetcode129. 求根到葉子節點數字之和(dfs)

給定一個二叉樹&#xff0c;它的每個結點都存放一個 0-9 的數字&#xff0c;每條從根到葉子節點的路徑都代表一個數字。例如&#xff0c;從根到葉子節點路徑 1->2->3 代表數字 123。計算從根到葉子節點生成的所有數字之和。說明: 葉子節點是指沒有子節點的節點。示例 1:輸…

java for i i 區別,i ++amp;和i ++之間的區別是什么? ++我在for循環(Java)?

hello, Ive just started learning Java and now Im into for loop statement. I dont understand how i i works in a for loop statement.I mean how they work in mathematics operations like addition and subtraction. I hope some one will explain this to me.解決方案…

php 設置中文 cookie, js獲取

參考鏈接:http://www.nowamagic.net/librarys/veda/detail/1271 http://www.ruanyifeng.com/blog/2008/06/base64.html cookie.js 文件 var Cookies {}; /** * 設置Cookies */ Cookies.set function(name, value){ var argv arguments; var argc arguments.length; var exp…

學會這二十個正則表達式,能讓你少些1000行代碼!

正則表達式&#xff0c;是一個強大且高效的文本處理工具。通常情況下&#xff0c;通過一段表達準確的表達式&#xff0c;能夠非常簡短、快速的實現復雜業務邏輯。因此&#xff0c;正則表達式通常是一個成熟開發人員的標配&#xff0c;可以輔助實現開發效率的極強提升。在需要實…

mergesort_Mergesort算法的功能方法

mergesortby Joe Chasinga通過喬查辛加(Joe Chasinga) Mergesort算法的功能方法 (A functional approach to mergesort algorithm) Algorithms are often difficult for people to understand. I believe that this is because they are most often programmed or explained i…

循環內部異步函數處理相關問題解析

需求分析&#xff1a;根據一級標題ID篩選出所有對應的二級標題&#xff0c;返回一級標題ID&#xff0c;標題名和二級標題ID&#xff0c;標題名組成的數組 問題&#xff1a;通過forEach遍歷所有一級標題取對應的ID&#xff0c;根據ID條件查找所有的二級標題&#xff0c;遍歷符合…

nacos怎么修改服務分組_Nacos(六):多環境下如何“管理”及“隔離”配置和服務...

前言前景回顧&#xff1a;現如今&#xff0c;在微服務體系中&#xff0c;一個系統往往被拆分為多個服務&#xff0c;每個服務都有自己的配置文件&#xff0c;然后每個系統往往還會準備開發環境、測試環境、正式環境我們來說算一算&#xff0c;假設某系統有10個微服務&#xff0…

Hive_Hive的數據模型_內部表

Hive的數據模型_內部表 - 與數據庫中的Table在概念上是類似。- 每一個Table在Hive中都有一個相應的目錄存儲數據。- 所有的Table數據(不包括External Table)都保存在這個目錄中。 create table t1 (tid int, tname string, age int);create table t2 (tid int, tname string, a…

為啥JAVA虛擬機不開發系統_理解Java虛擬機體系結構

1 概述眾所周知&#xff0c;Java支持平臺無關性、安全性和網絡移動性。而Java平臺由Java虛擬機和Java核心類所構成&#xff0c;它為純Java程序提供了統一的編程接口&#xff0c;而不管下層操作系統是什么。正是得益于Java虛擬機&#xff0c;它號稱的“一次編譯&#xff0c;到處…

Android WindowManager和WindowManager.LayoutParams的使用以及實現懸浮窗口的方法

1.理清概念 我們使用過Dialog和PopupWindow,還有Toast,它們都顯示在Activity之上。那么我們首先需要理解的是android中是如何去繪制這些UI的呢&#xff1f;這里我只講我所理解的&#xff0c;首先看一層次圖&#xff08;盜用網絡&#xff09;首先我們看到左邊的Activity層&#…

leetcode面試題 04.03. 特定深度節點鏈表(bfs)

給定一棵二叉樹&#xff0c;設計一個算法&#xff0c;創建含有某一深度上所有節點的鏈表&#xff08;比如&#xff0c;若一棵樹的深度為 D&#xff0c;則會創建出 D 個鏈表&#xff09;。返回一個包含所有深度的鏈表的數組。示例&#xff1a;輸入&#xff1a;[1,2,3,4,5,null,7…

Java集合中的細節

integer數據對比 對于Integer var ? 在-128至127范圍內的賦值&#xff0c;Integer對象是在IntegerCache.cache產生&#xff0c;會復用已有對象&#xff0c;這個區間內的Integer值可以直接使用進行判斷&#xff0c;但是這個區間之外的所有數據&#xff0c;都會在堆上產生&…

css擴展語言_如何決定是否應該鏈接或擴展CSS類

css擴展語言by Sarah Dayan通過莎拉達揚 如何決定是否應該鏈接或擴展CSS類 (How to decide whether you should chain or extend CSS classes) If you’re building an app or a website that changes often, modular CSS methods solve many issues. Instead of copying your…

vue 是否有word編輯控件_GitHub - C84882428/editor-ui: vue集成 tinymce 富文本編輯器,增加導入 word 模板...

editor-uivue 集成 tinymce 富文本編輯器自定義 tinymce 富文本編輯器,在原來的編輯器中增加上傳 word 模板最終展示效果:主要代碼:整體思路:1,在編輯器原來的基礎上增加上傳模板按鈕2, 前端上傳 word 模板3, 服務端接收將 word 轉換為html 返回前端4, 前端拿到服務端返回的值,…

Android開發系列之屏幕密度和單位轉換

由于Android的開源性&#xff0c;所以目前市面上面Android手機的分辨率特別多&#xff0c;這樣的話就給我適配帶來了一定的難度。要想做好適配&#xff0c;我們首先應該明白什么是分辨率、PPI、屏幕大小等概念&#xff0c;還有在不同的屏幕密度下&#xff0c;各個單位之間的轉換…

java集合AbstractMap_Java 集合中的 AbstractMap 抽象類

Java 集合中的 AbstractMap 抽象類jdk1.8.0_144AbstractMap 抽象類實現了一些簡單且通用的方法, 本身并不難但在這個抽象類中有兩個方法非常值得關注, keySet 和 values 方法源碼的實現可以說是教科書式的典范抽象類通常作為一種骨架實現, 為各自子類實現公共的方法上一篇我們講…