jQuery學習之 效果

2021-09-06 06:36:39 字數 1662 閱讀 3151

今天繼續學習一下jquery,主要記錄一下jquery的那些效果顯示

1.animate() 函式

animate() 方法執行 css 屬性集的自定義動畫。

該方法通過css樣式將元素從乙個狀態改變為另乙個狀態。css屬性值是逐漸改變的,這樣就可以建立動畫效果。

只有數字值可建立動畫(比如 "margin:30px")。字串值無法建立動畫(比如 "background-color:red")。

語法如下:$(selector).animate(styles,speed,easing,callback)

引數描述

styles

必需。規定產生動畫效果的 css 樣式和值。

可能的 css 樣式值(提供例項):

注釋:css 樣式使用 dom 名稱(比如 "fontsize")來設定,而非 css 名稱(比如 "font-size")。

speed

可選。規定動畫的速度。預設是 "normal"。

可能的值:

easing

可選。規定在不同的動畫點中設定動畫速度的 easing 函式。

內建的 easing 函式:

callback

可選。animate 函式執行完之後,要執行的函式。

例:

$(".btn1").click(function

(), "slow", function());

2.fadein()和fadeout()函式

這兩個一般都是成對出現的,fadein() 方法使用淡入效果來顯示被選元素,假如該元素是隱藏的。fadeout() 方法使用淡出效果來隱藏被選元素,假如該元素是隱藏的。

語法如下:$(selector).fadeout(speed,callback)             $(selector).fadein(speed,callback)

例:

$(".btn1").click(function

());

$(".btn2").click(function

());

3.toggle()函式

toggle() 方法切換元素的可見狀態。

如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。

語法如下:$(selector).toggle(speed,callback,switch)

speed

可選。規定元素從可見到隱藏的速度(或者相反)。預設為 "0"。

可能的值:

在設定速度的情況下,元素從可見到隱藏的過程中,會逐漸地改變其高度、寬度、外邊距、內邊距和透明度。

如果設定此引數,則無法使用 switch 引數。

callback

可選。toggle 函式執行完之後,要執行的函式。

除非設定了 speed 引數,否則不能設定該引數。

switch

可選。布林值。規定 toggle 是否隱藏或顯示所有被選元素。

如果設定此引數,則無法使用 speed 和 callback 引數。

例:

$("p").toggle();

jQuery學習之動畫效果

show hide 1.實現可折疊的列表 li has ul click function event else return false css cursor pointer click li not has ul css 2.切換元素的顯示狀態 toggle 可以切換顯示和隱藏狀態,替代show...

jQuery學習之基本效果

1 show 顯示隱藏的匹配元素 這個就是 show speed,callback 無動畫的版本。如果選擇的元素是可見的,這個方法將不會改變任何東西。無論這個元素是通過hide 方法隱藏的還是在css裡設定了display none 這個方法都將有效。示例 顯示所有段落 html hello jqu...

jQuery之動畫效果

1 show 顯示效果 語法 show speed,callback number string,function speend為動畫執行時間,單位為毫秒。也可以為slow normal fast callback可選,為當動畫完成時執行的函式。show speed,easing callback ...