jQuery特效動畫

2021-09-10 12:31:38 字數 1799 閱讀 2874

jquery提供了很多動畫效果:

一. 控制元素顯示和隱藏

以前可以通過css()方法改變元素的display屬性的值達到顯示(block)和隱藏(none)元素的目的。在jquery中,提供了專門的方法控制元素的顯示和隱藏,並且增加了動畫效果。

show()等同於

$(selector).css("display","block");
除了可以控制元素的顯示外,還能定義顯示元素時的效果,如顯示速度

語法格式:

$(selector).show([speed],[callback]);
引數

說明speed

可選,規定元素從隱藏到完全可見的速度,預設為0。可能值:毫秒,slow,normal,fast。在設定速度的情況下,元素從隱藏到完全可見的過程中,會逐漸地改變高度,寬度,外邊距,內邊距和透明度

callback

可選,show函式執行完後要執行的函式

hide()與show()方法相反,引數也是一樣,常成對使用。

二,切換元素可見狀態

復合事件中的toggle() 方法,除了可以模擬滑鼠的連續單擊事件外,還能用於切換元素的可見狀態,如果元素可見,單擊切換後隱藏元素

關鍵**:

從**執行效率考慮,使用toggle()方法替代show()和hide()方法製作輪流切換元素的可見狀態,更好。

比如京東的滑鼠懸浮到一級選單時,二級選單顯示,滑鼠離開,二級選單消失

關鍵**

index=$(".inner-box").index($(this));//獲取當前懸浮的index值

$(".erji-box div").eq(index).show(); //讓相應二級內容顯示

$(".erji-box div").eq(index).siblings().hide(); //所有相應二級的同輩元素隱藏

二, 控制元素淡入和淡出

fadein()方法控制元素淡入

$(selector).fadein([speed],[callback]);
引數和上面一樣

fadeout()方法控制元素淡出

切換元素出入狀態

切換元素的淡入淡出狀態的方法——fadetoggle()方法,如果元素已經淡出,fadetoggle()會向元素新增淡入效果,如果元素已經淡入,會向元素新增淡出效果,用法與toggle()相同。

注意:jquery中所有動畫效果,都可以設定slow,normal,fast(0.6秒,0.4秒和0.2秒),這些要用雙引號括起來,如fadein(「normal」),而使用時間數值作為速度引數,不需要使用雙引號。時間數值單位為毫秒。

三, 控制元素滑動

slidedown(),slideup()引數和上面一致,常用於選項卡,下拉列表和提示資訊等

............

同樣也存在乙個slidetoggle()方法

四, 自定義動畫

animate()用來建立自定義動畫

$(selector).animate(,speed,callback);
params必選,定義形成動畫的css屬性

後面的兩個引數和前面的一樣

jQuery 動畫與特效

在jquery中使用 hide 和 show 方法來隱藏和顯示 html 元素 hide 的語法形式 selector hide speed,callback show 的語法形式 selector show speed,callback speed 引數規定隱藏 顯示的速度,可以取以下值 slow...

JQuery特效與動畫總結

幾種特效 一 顯示與隱藏show hide js寫法 docment.getelementbyid p1 style.display block document.getelementbyid p1 style.display none jquery顯示與隱藏的方法 p1 css dislay bl...

jquery中動畫特效方法

基本特效 方法 說明 show 顯示選中的元素 hide 隱藏選中的元素 toggle 在選中的元素上切換顯示和隱藏的狀態 淡入淡出效果 方法 說明 fadein 淡入選中元素使其變得不透明 fadeout 淡出選中元素使其變得透明 dadeto 修改選中元素的透明度 fadetoggle 使用透明...