關於JQuery animate 方法

2022-03-25 08:27:54 字數 1316 閱讀 5917

html:

點選我

如果你想在乙個涉及動畫的函式之後來執行語句,請使用callback函式

css部分:

注意:使用animate函式時,為了能夠影響元素的 top bottom left right 屬性值,需先將position屬性值設定為 relative 或者 absolute 

.panel 

.content

如果在500之前加上 += 或 -= 代表在當前位置遞增或者遞減 

$(".panel").click(function() ,3000);//遞增

})

同時執行多個動畫

$(this).animate(,3000);

按順序執行動畫 -- 動畫佇列

$(this).animate(,3000);

$(this).animate(,3000);

以上可改為 鏈式寫法

$(this).animate(,3000).animate(, 3000);

綜合動畫

透明度可以用小數,用百分數無效

$(this).animate(,3000).animate(,3000).fadeout("slow");

給hover 事件新增 stop() 方法 可解決移入移出動作過快 導致游標動作與動畫效果不一致的問題

注意: 移入移出都需要新增stop()

$(".panel").hover(function() ,3000)

},function(),3000)

})

當遇到的是組合動畫的時候

$(".panel").hover(function() ,3000)//如果此時游標移出

.animate(,3000)//執行這個動畫 而不是下面移出的動畫

},function(),3000)

.animate(,3000)

})

把stop()第乙個引數設定為true ,可以解決上面的問題,跳過width為300的樣式改變 執行滑鼠移出事件

$(".panel").hover(function() ,3000)//如果此時游標移出

.animate(,3000)//執行下面移出的動畫

},function(),3000)

.animate(,3000)

})

如果stop()第二個引數也設定為true的時候,可以直接到達結束時候的狀態

jQuery animate 動畫效果

1.jquery動畫效果 jquery animate 方法用於建立自定義動畫 selector animate speed,callback 必需的 params 引數定義形成動畫的 css 屬性 可選的 speed 引數規定效果的時長,它可以取以下值 slow fast 或毫秒 可選的 call...

關於程式關於世界

首先,在學了1年多的軟體設計的基礎上,問下自己 程式是什麼?業務需求是什麼?程式有什麼用?什麼是演算法?什麼是資料庫?或許每個人的理解不同,會給出不同的答案。那麼自己的理解 程式是乙個讓計算機工作的流程,在程式寫好之後,計算機就會按照,程式設計師定義好流程在執行。其實很多時候,乙個程式的好壞,在於乙...

關於血液關於軟體

1 自然沉降法 將血袋垂直吊掛於4 2 冰箱內,使紅細胞自然下沉1 3d,或將血袋呈70 80 角立於冰箱,需用時,用一次性分漿器分出血漿,制得濃縮紅細胞。2 洗滌法 一般用生理鹽水反覆洗滌3 6次。經洗滌的紅細胞,除白細胞和血小板減少外,血漿蛋白也極少,紅細胞中殘存的血漿蛋白含量約為原總蛋白的1 ...