jQuery動畫效果

2021-10-09 04:14:27 字數 1250 閱讀 1029

jquery動畫效果
1.移動與放大縮小

實現動畫效果(上/下/左/右移動和放大、縮小效果)的乙個前提:在css啟用position定位功能後,才可以使用

animate()這個方法實現動畫效果(一般用position:fixed;)

eg:上/下/左/右移動

.animate();

.animate();

.animate();

.animate();

注:上移動是從上向下移動,它的最終結果是移動到下面(下/左/右移動同理)。

在這裡插入描述

.animate();放大效果

.animate();縮小效果

2.隱藏/顯示切換

語法:隱藏: .hide(「slow」/「fast」/毫秒/空);

緩慢 快速

顯示: .show(「slow」/「fast」/毫秒/空);

切換: .toggle(「slow」/「fast」/毫秒/空);過程

.toggle(); 切換

.toggle(毫秒);

變化速度由設定時間來定

.toggle(「hide」);

隱藏切換

.toggle(「show」);

顯示切換

3.淡入淡出效果
淡入: .fadein(「slow」/「fast」/毫秒/空);

淡出: .fadeout(「slow」/「fast」/毫秒/空);

淡入淡出切換: .fadetoggle(「slow」/「fast」/毫秒/空);

透明層:.fadeto(毫秒,0至1之間的數值);

淡化的程度(深淺) 注:數值越接近1顏色反而越淺

4.滑動效果
向下滑動:.slidedown(「slow」/「fast」/毫秒/空);

向上滑動:.slideup(「slow」/「fast」/毫秒/空);

上下滑動切換:.slidetoggle(「slow」/「fast」/毫秒/空);

5.增加/刪除css樣式

語法: .css() ; 增加css引數值

.addclass(); 增加css樣式

.removeclass(); 刪除css樣式

.toggleclass(); 增加css樣式與刪除css樣式 切換

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 引數規定效果的時長。它可...