jQuery實現簡單的動畫

2022-04-09 18:26:16 字數 1767 閱讀 9201

1.淡入淡出效果

fadein()  淡入隱藏的元素

$(selector).fadein(speed,callback);

/*引數

speed:效果時長。可取的值:slow、fast、毫秒數

callback:過渡完成後,所執行的方法名稱

*/$("div").fadein(3000);

fadeout() 淡出可見的元素    fadetoggle()  切換淡入淡出效果

fadeto()  漸變設定元素的不透明度

$(selector).fadeto(speed,opacity,callback);

/*引數

speed:效果時長。可取的值:slow、fast、毫秒數

opacity:不透明度的值,介於0-1之間

callback:過渡完成後,所執行的方法名稱

*/$("div").fadeto('slow',0.7);

2.滑動效果

slidedown()  向下滑動元素

$(selector).fadedown(speed,callback);

/*引數

speed:效果時長。可取的值:slow、fast、毫秒數

callback:過渡完成後,所執行的方法名稱

*/$("div").fadedown(3000);

slideup()、slidetoggle()用法同上

3.自定義動畫

animate()

$(selector).animate(,speed,callback);

/*引數

params:形成動畫的css屬性

speed:效果時長。可取的值:slow、fast、毫秒數

callback:過渡完成後,所執行的方法名稱

*/$("div").animate();

注意:如果遇到中間有連線字元的屬性,第二個字母需要大寫。例:marginleft

可以使用相對值(+=、-=)

$("button").click(function

());

});

可以使用預定義的值,將屬性的動畫值設為show、hide、toggle

$("button").click(function

());

});

可以呼叫多個動畫

$("button").click(function

(),"slow");

div.animate(,"slow");

div.animate(,"slow");

div.animate(,"slow");

});

4.停止動畫

stop()

$(selector).stop(stopall,gotoend);

/*引數:

stopall:是否清除動畫佇列,預設為false,即僅停止活動的動畫

gotoend:是否立即完成當前動畫,預設為false

*/$("div").stop(); //

停止當前啟用的動畫,但還可以在動畫列表中再次啟用

$("div").stop(true); //

停止當前動畫,並清除動畫佇列,所有的動畫都會停止

$("div").stop(true,true); //

快速完成動作,並停止它

jquery動畫實現

1.顯示隱藏 hide time,fn 隱藏 time 時間 fn 動畫執行完畢後做什麼 show time,fn 顯示 time 時間 fn 動畫執行完畢後做什麼 toggle time,fn 互斥邏輯顯示隱藏 time 時間 fn 動畫執行完畢後做什麼 2.滑動顯示隱藏 通過改變元素高度實現滑動...

jquery 簡單的動畫效果

在html中預設的所有的元素都是不能動的 所以要實現動畫效果,必須要將positon 設定為 fixed relative absolute 才能實現 ex hide click function slow this parents ex fadeout 100 動畫在執行完成之後動作才會繼續往下做...

jQuery 中的簡單動畫

製作動畫常用方法 show 速度 顯示元素 hide 速度 隱藏元素 toggle 切換效果 例如下jquery function function fadeout fadein 這兩個方法是改變元素的不透明度 實現隱藏和顯示的效果 例如下jquery function function slide...