jQuery動畫效果

2021-09-26 08:23:09 字數 3230 閱讀 8890

show()方法和hide()方法是jquery中最基本的動畫方法。在html文件裡，為乙個元素呼叫hide()方法，會將該元素的display樣式改為「none」。

1.1 hide() 和 show()

我們可以使用 hide() 和 show() 方法來隱藏和顯示 html 元素：

我是乙個div標籤


顯示隱藏
hide() 和 show() 分別可以攜帶兩個可選引數，乙個是speed引數另外乙個是callback引數。

下面的例子演示了帶有 speed 引數的 hide() 方法：

我是乙個div標籤


顯示效果


隱藏效果
1.2 toggle()方法我們可以使用 toggle() 方法來切換 hide() 和 show() 方法。

toggle() 可以攜帶兩個可選引數，乙個是speed引數另外乙個是callback引數，兩個引數的作用和show()方法一樣。

我是乙個div標籤


顯示隱藏切換效果
fadein()方法和fadeout()方法與show方法不相同的是，fadein()方法和fadeout()方法只改變元素的不透明度。fadeout()方法會在指定的一段時間內降低元素的不透明度，直到元素完全消失(「display: none」)。fadein()方法則恰好相反。

加粗樣式2.1 fadein()和fadeout()

fadein() 用於淡入已隱藏的元素，fadeout() 方法用於淡出可見元素。

fadein() 和 fadeout() 分別可以攜帶兩個可選引數，乙個是speed引數另外乙個是callback引數，兩個引數的作用和show()方法一樣。

我是乙個div標籤


淡入效果


淡出效果
2.2 fadetoggle() 方法fadetoggle() 方法可以在 fadein() 與 fadeout() 方法之間進行切換。

如果元素已淡出，則 fadetoggle() 會向元素新增淡入效果；如果元素已淡入，則 fadetoggle() 會向元素新增淡出效果。

fadetoggle() 可以攜帶兩個可選引數，乙個是speed引數另外乙個是callback引數，兩個引數的作用和show()方法一樣。

我是乙個div標籤


淡入淡出切換效果
2.3 fadeto() 方法fadeto() 方法允許漸變為給定的不透明度（值介於 0 與 1 之間），語法：$(selector).fadeto(speed, opacity, callback);。

fadeto() 方法中opacity 引數【必須】將淡入淡出效果設定為給定的不透明度（值介於 0 與 1 之間）。

下面的例子演示了帶有不同引數的 fadeto() 方法：

給定的不透明度
slidedown()方法和slideup()方法只改變元素的高度，slideup()方法會在指定的一段時間內降低元素的高度，直到元素完全消失(「display: none」)。slidedown()方法則恰好相反。

3.1 slidedown()和slideup()

slidedown() 方法用於向下滑動元素，slideup() 方法用於向上滑動元素。

slidedown() 和 slideup() 分別可以攜帶兩個可選引數，乙個是speed引數另外乙個是callback引數，兩個引數的作用和show()方法一樣。

向上滑動


向下滑動
3.2 slidetoggle() 方法slidetoggle() 方法可以在 slidedown() 與 slideup() 方法之間進行切換。

如果元素向下滑動，則 slidetoggle() 可向上滑動它們；如果元素向上滑動，則 slidetoggle() 可向下滑動它們。

slidetoggle() 可以攜帶兩個可選引數，乙個是speed引數另外乙個是callback引數，兩個引數的作用和show()方法一樣。

向上向下滑動切換
前面已經講了多種型別的動畫，如果這些動畫還無法滿足使用者的需求，那麼就需要對動畫有更多的控制，需要採取一些高階的自定義動畫來解決這些問題。在jquery中，我們可以使用animate()方法來自定義動畫。

4.1 animate() 方法

animate() 方法用於建立自定義動畫的函式。

語法：$(selector).animate(, speed, easing, callback);

自定義動畫例項：

自定義動畫
4.2 animate() 使用佇列功能jquery 提供針對動畫的佇列功能，我們可以編寫多個 animate() 呼叫，jquery 會建立包含這些方法呼叫的「內部」佇列。然後逐一執行這些 animate 呼叫。

使用佇列功能
4.3 jquery外掛程式jquery動畫中並不支援色彩動畫（例如背景顏色，字型顏色），如果想要生成顏色動畫，那麼我們可以使用 jquery.color.js 外掛程式來幫我們實現。

我是乙個div


自定義動畫
很多時候需要停止匹配元素正在進行的動畫，那麼我們可以使用stop()方法來停止動畫。

語法：$(selector).stop(stopall, gotoend);

停止動畫示例：

停止動畫

jquery 動畫效果

首先，在做jquery 動畫效果之前，必須先知道jquery動畫效果的實現順序。jquery中，會把所有的動畫效果 如hide，show等 放入乙個佇列中 預設為 fx 然後依照先進先出的原則執行佇列中的動畫效果。其他的非動畫效果，都不會放入佇列中。並且jquery 會優先執行這些非動畫效果，然後再...

JQuery動畫效果

show 顯示隱藏的匹配元素 hide 隱藏顯示的元素 slideup 滑走 元素不能復原 slidetoggle 滑走 元素可以復原 感覺今天寫的並沒有什麼卵用 因為這是動的啊！但是看在iphone更新的情況下 就寫一下吧 fadein 通過不透明度的變化來實現所有匹配元素的淡入效果注意 不會 影...

jQuery 效果 動畫

jquery animate 方法允許您建立自定義的動畫。開始動畫 jquery jquery animate 方法用於建立自定義動畫。selector animate speed,callback 必需的 params 引數定義形成動畫的 css 屬性。可選的 speed 引數規定效果的時長。它可...