<!--

淡入淡出: 不斷改變元素的透明度來實現的

1. fadeIn(): 帶動畫的顯示

2. fadeOut(): 帶動畫隱藏

3. fadeToggle(): 帶動畫切換顯示/隱藏

?

-->

jQuery動畫本質 : 在指定時間內不斷改變元素樣式值來實現的

1. animate(): 自定義動畫效果的動畫

2. stop(): 停止動畫

<!--

滑動動畫

1. slideDown(): 帶動畫的展開

2. slideUp(): 帶動畫的收縮

3. slideToggle(): 帶動畫的切換展開/收縮

-->

<!--

顯示隱藏，默認沒有動畫

1. show(): (不)帶動畫的顯示

2. hide(): (不)帶動畫的隱藏

3. toggle(): (不)帶動畫的切換顯示/隱藏

-->

? $('#btn3').click(function () {

??? // 1). 移動距離為(100, 50)

??? /*$div1.animate({

????? left: '+=100',

????? top: '+=50'

??? }, 1000)*/

?

??? // 2). 移動距離為(-100, -20)

??? $div1.animate({

????? left: '-=100',

????? top: '-=20'

??? }, 3000)

? })

?

? $('#btn4').click(function () {

??? $div1.stop()

? })

jQ多函數庫共存

問題 : 如果有2個庫都有$, 就存在沖突

解決 : jQuery庫可以釋放$的使用權, 讓另一個庫可以正常使用, 此時jQuery庫只能使用jQuery了

API : jQuery.noConflict()

-->

<script type="text/javascript" src="js/myLib.js"></script>

<script type="text/javascript" src="js/jquery-1.10.1.js"></script>

<script type="text/javascript">

?

? // 釋放$的使用權

? jQuery.noConflict()

? // 調用myLib中的$

? $()

? // 要想使用jQuery的功能, 只能使用jQuery

? jQuery(function () {

??? console.log('文檔加載完成')//在最后執行，回調函數是異步執行的

? })

? console.log('+++++')

?

<!--

區別: window.onload與 $(document).ready()

? * window.onload

??? * 包括頁面的圖片加載完后才會回調(晚)

??? * 只能有一個監聽回調

? * $(document).ready()

??? * 等同于: $(function(){})

??? * 頁面加載完就回調(早)

??? * 可以有多個監聽回調

-->

轉載于:https://www.cnblogs.com/love-life-insist/p/9063716.html

總結

以上是生活随笔為你收集整理的jQuery内置动画和多库共存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。