28 Jquery 頁面效果

2022-01-29 13:32:01 字數 2311 閱讀 7096

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滾動 在本文中,我將介紹乙個可以跟隨頁面滾動的層效果,當使用者滾動滑鼠滾輪或者拖動瀏覽器滾動條時,浮動層將跟隨滾動。我通過例項講解相關外掛程式的應用以及使用時注意事項。在本例中,我用到了...