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...