二 jquery學習 jquery的效果

2022-07-24 02:06:15 字數 2481 閱讀 3531

jquery的基本效果包括隱藏、顯示、切換,滑動,淡入淡出,以及動畫等等。

一、隱藏與顯示

通過呼叫hide()和show()方法實現。

語法如下:

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

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

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

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

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

二、淡入淡出

jquery fadein() 用於淡入已隱藏的元素 顯示在頁面上

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

jquery fadeout() 方法用於淡出可見元素 消失在頁面上

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

jquery fadetoggle() 方法可以在 fadein() 與 fadeout() 方法之間進行切換。

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

如果元素已淡出,則 fadetoggle() 會向元素新增淡入效果。

如果元素已淡入,則 fadetoggle() 會向元素新增淡出效果。

jquery fadeto() 方法允許漸變為給定的不透明度(值介於 0 與 1 之間)。

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

fadeto() 方法中必需的 opacity 引數將淡入淡出效果設定為給定的不透明度(值介於 0 與 1 之間)。

三、滑動效果

呼叫slidedown()和sildeup().

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

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

語法:$(selector).slidedown(speed,callback);  $(selector).slideup(speed,callback);

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

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

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

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

四、建立動畫

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

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

必需的 params 引數定義形成動畫的 css 屬性。

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

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

五、停止動畫

query stop() 方法用於停止動畫或效果,在它們完成之前。

stop() 方法適用於所有 jquery 效果函式,包括滑動、淡入淡出和自定義動畫。

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

stopall 引數規定是否應該清除動畫佇列。預設是 false,即僅停止活動的動畫,允許任何排入佇列的動畫向後執行。

可選的 gotoend 引數規定是否立即完成當前動畫。預設是 false。

六、callback()

$(selector).action(**,callback())

callback函式是在動畫完成後才呼叫的。

六、jquery 鏈

chaining 允許在一條語句中執行多個 jquery 方法(在相同的元素上)。這樣的話,瀏覽器就不必多次查詢相同的元素。如需鏈結乙個動作,您只需簡單地把該動作追加到之前的動作上。

jQuery學習之二 jQuery效果

1 jquery 效果之隱藏和顯示 selector toggle speed,callback 隱藏 顯示切換 可選的 speed 引數規定隱藏 顯示的速度,可以取以下值 slow fast 或毫秒。可選的 callback 引數是隱藏或顯示完成後所執行的函式名稱。利用隱藏和顯示功能可以實現tab...

jQuery學習筆記(二)之jQuery選擇器

html頁面元素就一些html標籤 元素 和對應的html元素屬性組成,屬性包括id,class,獲取css樣式屬性等,其中通過css樣式屬性獲取jquery,這裡的css樣式屬性就可以稱為jquery的css選擇器 另外jquery還支援xpath選擇,其實跟css差不多。下面就這對各種常用的選擇...

jquery原始碼學習筆記二 jQuery工廠

筆記一裡記錄,jquery的總體結構如下 function global,factory typeof window undefined window this,function window,noglobal 那麼這個生成jquery的工廠是咋樣的?醬紫的 function window,nogl...