jquery動畫函式分為三類
基本動畫函式
基本動畫函式包括show(顯示)、hide(隱藏)、toggle(切換)這三個函式。
例子所需html
<input
type
="button"
value
="點選"
id="btn"
/>
<
div
id="ts"
>這是乙個提示
div>
show()
主要用來控制元素的顯示,如果元素預設處於顯示狀態則不會發生任何改變。
$("#ts").show(); //
如果這個元素是隱藏的 則將其顯示
該方法還提供了乙個過載,可以實現動畫效果慢慢顯示,引數為毫秒。
$("#ts").show(400); //
引數毫秒
可以在發生變化後執行**函式
$("#ts").show(400,function());
hide()
該方法對應show方法,意思是隱藏的意思。將頁面上的元素進行隱藏,同樣也有過載和**函式。
$("#ts").hide(); //將元素立即隱藏
$("#ts").hide(400); //
將元素緩慢隱藏 引數毫秒
$("#ts").hide(400,function
());
toggle()
對於顯示和隱藏提供了乙個切換方法,如果隱藏則開啟,否則則隱藏。
$("#btn").click(function());
});
滑動動畫函式
滑動動畫函式包括slideup(滑動隱藏)、slidedown(滑動顯示)、slidetoggle(滑動開關)
slidedown()
就是滑動版的show方法,引數一樣。
$("#ts").slidedown(); //從上到下 滑動顯示 滑動show
slideup()
滑動版的hide方法。
$("#btn").click(function());
slidetoggle()
滑動版toggle方法。
$("#btn").click(function());
});
淡入淡出動畫函式
淡入淡出函式包括:fadeout()、fadein()、fadetoggle()、fadeto(),效果為透明度慢慢變底或變高,使用方法同上。而fadeto方法是漸變到給定的透明值。
fadeto()
$("#btn").click(function());
自定義動畫函式
animate()
該方法用於將某個元素慢慢變為某個形式。
$("#ts").css("border","1px dashed #000").css("width","100px").
animate(,1000);
stop()
stop()方法用於停止某個動畫
$("#btn").click(function());
乙個滑鼠移入移出例子
$("#btn").mouseover(function(),1000);
}).mouseout(
function
(),1000);
});
另外有乙個全域性函式可以禁用所有頁面的動畫。
$.fx.off=true; //全域性屬性 禁用所有動畫 false為啟動
$("ts").hide();
將該屬性設定為true後,跟在後面的所有動畫都不會執行。
jQuery實現頁面錨點滾動效果
核心 html,body animate 1500 讓滾動條在指定時間內,滾動到指定元素的位置。scrolltop 相對滾動條頂部的偏移 offset獲取元素偏移量.top表示獲取元素距離頂端的位置,left表示獲取元素距離左側的位置 第一章第二章 第三章第一章 第一章節內容 第一章節內容 第一章節...
jQuery實現浮動層跟隨頁面滾動效果
在本文中,我將介紹乙個可以跟隨頁面滾動的層效果,當使用者滾動滑鼠滾輪或者拖動瀏覽器滾動條時,浮動層將跟隨滾動。我通過例項講解相關外掛程式的應用以及使用時注意事項。在本例中,我用到了乙個重要的外掛程式 scroll follow,該外掛程式在當前主流瀏覽器ie6 ff2 safari 3,and op...
jQuery實現浮動層跟隨頁面滾動效果
helloweba.com author 月光光 time 2010 11 29 09 02 tag jquery滾動 在本文中,我將介紹乙個可以跟隨頁面滾動的層效果,當使用者滾動滑鼠滾輪或者拖動瀏覽器滾動條時,浮動層將跟隨滾動。我通過例項講解相關外掛程式的應用以及使用時注意事項。在本例中,我用到了...