jquery運動

ThreeWords 發布于2019-08-23 11:40 / 559人閱讀

摘要：運動做鏈式運動的時候可以使用回調函數，多寫幾個運動。然后逐一運動這些調用。默認是，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。可選參數規定是否立即完成當前動畫。清除當前運動停止滑動點擊這里，向下滑動面板

在前面封裝的move.js框架，在jquery中有同樣封裝好的功能animate()。使用方法非常類似，下面我們看看animate的使用方法，有了原生的運動方法，然后再使用jquery的運動方法就會變得非常簡單。

animate()語法

$(selector).animate({params},speed,callback);

必需的params參數定義形成動畫的css屬性。
可選的speed參數規定效果的時長。它可以取以下值“slow”，“fast”或毫秒。
可選的callback參數是動畫完成后所執行的函數名稱。
注意：如需對位置進行操作，要記得首先把元素的CSS position屬性設置為relative、fixed或absoult。

用animate()方法做一個多屬性同時運動的例子

通過上面的代碼我們可以看出jquery運動可以做多屬性運動，也可以做鏈式運動，也可以做單屬性運動。調用方式跟我們用原始javascript封裝的框架一樣。區別在于這里可以設定速度。json串中帶px等單位。jquery運動做鏈式運動的時候可以使用回調函數，多寫幾個運動。animate的更多使用方法可以參考http://www.w3school.com.cn/jq...。

注意：是否可以用animate()方法來操作所有css屬性？是的，幾乎可以！不過，需要記住一件重要的事情：當使用animate()時，必須使用Camel標記法書寫所有的屬性名，比如，必須使用paddingLeft而不是padding-left，使用marginRight而不是margin-right等等。同時，色彩動畫并不包含在核心jQuery庫中。如果需要生成顏色動畫，您需要從jQuery.com下載Color Animations插件。

animate()使用預定義的值——"show"/"hide"/"toggle"



  
    jquery animate可以使用預定義的值

animate()使用隊列功能——類似于我們自己封裝的鏈式運動

我們封裝的運動沒有隊列功能。但是jquery提供針對動畫的隊列功能。這就意味著如果您在彼此之后編寫多個animate()調用，jquery會創建包含這些方法調用的內部隊列。然后逐一運動這些animate調用。



  
    animate隊列調用

stop()停止動畫或效果

stop()方法用于停止動畫或效果，在它們完成之前。
stop()方法適用于所有jquery效果函數，包括滑動、淡入淡出和自定義動畫。
語法：

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

可選參數stopAll規定是否應該清除動畫隊列。默認是false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。

可選參數goToEnd規定是否立即完成當前動畫。默認是false。

所以，默認的stop()會清除在被選元素上指定的當前動畫。




  stop()清除當前運動
  
  
  


  
  點擊這里，向下滑動面板
  Hello world!

云服務器 GPU云服務器水平運動停止運動左右運動運動半徑

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97302.html

回味jQuery系列（2）-動畫效果

摘要：參數代表回調函數。參數為變化樣式的對象必傳，速度可選，回調函數可選。這是，肯定會想到采用回調函數來解決。確實可以解決問題，但是當列隊動畫變多時，回調函數的可讀性大大降低確實一個非常煩人的問題。提供了一個類似于回調函數的方法。 jQuery-動畫效果淺析動畫可以給網站的用戶體驗加分，讓網頁更加活潑。不過，什么東西都需要適量，簡易快捷的動畫會給網站加分不少。比如購物網站的個人中心按鈕ho...

IamDLY 2019-08-20 10:33 評論0 收藏0
jQuery動畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法...

MkkHou 2019-08-29 16:16 評論0 收藏0
jQuery動畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法...

ssshooter 2019-08-23 10:40 評論0 收藏0
jQuery動畫效果、jQuery插件使用

摘要：一事件的綁定與解綁的簡單綁定事件新版本使用為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。將整個文件放至項目的任意目錄不要移動其文件結構，它們具有完整的依賴體系。一、事件的綁定與解綁 1.1 jQuery的簡單綁定 1.1.1 on(events,fn)事件(新版本使用) 為指定的元素添加一個或多個事件處理程序，并規定當這個事件發生時運行的函數。on()方法...

joyvw 2019-08-02 11:08 評論0 收藏0