jQuery教程(四) jQuery 效果

2021-08-22 11:44:35 字數 2435 閱讀 6291

通過 jquery,您可以使用 hide() 和 show() 方法來隱藏和顯示 html 元素,例如:

$("#hide").click(function

());

$("#show").click(function

());

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

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

可選的 speed 引數規定隱藏/顯示的速度,可以取以下值:」slow」、」fast」 或毫秒。

可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。

通過 jquery,您可以使用 toggle() 方法來切換 hide() 和 show() 方法。

顯示被隱藏的元素,並隱藏已顯示的元素。

$("button").click(function

());

通過 jquery,您可以引用jquery fading 方法,實現元素的淡入淡出效果。

jquery 擁有下面四種 fade 方法:

jquery slidedown() 方法

jquery slidedown() 方法用於向下滑動元素。

語法:

$(selector).slidedown(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值:」slow」、」fast」 或毫秒。

可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery slideup() 方法

jquery slideup() 方法用於向上滑動元素。

語法:

$(selector).slideup(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值:」slow」、」fast」 或毫秒。

可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery slidetoggle() 方法

jquery slidetoggle() 方法可以在 slidedown() 與 slideup() 方法之間進行切換。

如果元素向下滑動,則 slidetoggle() 可向上滑動它們。

如果元素向上滑動,則 slidetoggle() 可向下滑動它們。

語法:

$(selector).slidetoggle(speed,callback);
可選的 speed 引數規定效果的時長。它可以取以下值:」slow」、」fast」 或毫秒。

可選的 callback 引數是滑動完成後所執行的函式名稱。

jquery 動畫 - animate() 方法

jquery animate() 方法用於建立自定義動畫。

語法:

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

可選的 speed 引數規定效果的時長。它可以取以下值:」slow」、」fast」 或毫秒。

可選的 callback 引數是動畫完成後所執行的函式名稱。

jquery animate() - 操作多個屬性

請注意,生成動畫的過程中可同時使用多個屬性:

例項:

$("button").click(function

());

});

jquery animate() - 使用相對值

也可以定義相對值(該值相對於元素的當前值)。需要在值的前面加上 += 或 -=:

例項:

$("button").click(function

());

});

jquery animate() - 使用預定義的值

您甚至可以把屬性的動畫值設定為 「show」、」hide」 或 「toggle」:

例項:

$("button").click(function

());

});

jquery animate() - 使用佇列功能

jquery 提供針對動畫的佇列功能。

這意味著如果您在彼此之後編寫多個 animate() 呼叫,jquery 會建立包含這些方法呼叫的「內部」佇列。然後逐一執行這些 animate 呼叫。

例項 :

$("button").click(function

(),"slow");

div.animate(,"slow");

div.animate(,"slow");

div.animate(,"slow");

});

jQuery教程 一 jquery語法

jquery 語法是為 html 元素的選取編制的,可以對元素執行某些操作。它的基礎語法是 selector action 其中 例如 this hide 隱藏當前元素 p hide 隱藏所有段落 test hide 隱藏所有 class test 的所有元素 test hide 隱藏所有 id t...

jQuery學習教程十七 jQuery 尺寸

通過 jquery,很容易處理元素和瀏覽器視窗的尺寸。jquery 提供多個處理尺寸的重要方法 width 方法設定或返回元素的寬度 不包括內邊距 邊框或外邊距 height 方法設定或返回元素的高度 不包括內邊距 邊框或外邊距 下面的例子返回指定的 元素的寬度和高度 顯示 div 的尺寸 widt...

jQuery 教程02 jQuery 語法

通過 jquery,您可以選取 查詢,query html 元素,並對它們執行 操作 actions jquery 語法是通過選取 html 元素,並對選取的元素執行某些操作。基礎語法 selector action 例項 this hide 隱藏當前元素 p hide 隱藏所有 元素 p.test...