jQuery提供能很多實現(xiàn)頁面動畫效果的工具函數(shù),使用這些函數(shù),能更好的提高用戶體驗。
首先,我們來看下,jQuery給我們提供的一些基礎(chǔ)的動畫函數(shù):
? animate( properties, [ duration ], [ easing ], [ callback ] ): 執(zhí)行一個CSS屬性設(shè)置的自定義動畫
? properties :一組CSS屬性,動畫將朝著這組屬性移動。
? duration :一個字符串或者數(shù)字決定動畫將運行多久 。
? easing :要使用的擦除效果的名稱(需要插件支持).默認(rèn)jQuery提供"linear" 和 "swing"。
? callback: 在動畫完成時執(zhí)行的函數(shù)。
? fadeIn( [ duration ], [ callback ] ): 通過淡入的方式顯示匹配元素。
? fadeOut( [ duration ], [ callback ] ): 通過淡出的方式顯示匹配元素。
? slideUp( [ duration ], [ callback ] ): 用滑動動畫隱藏一個匹配元素。
? slideDown( [ duration ], [ callback ] ): 用滑動動畫顯示一個匹配元素。
? slideToggle( [ duration ], [ callback ] ): 用滑動動畫顯示或隱藏一個匹配元素。
?
jQuery.fx.off:
當(dāng)這個屬性設(shè)置為
true
的時候,調(diào)用時所有動畫方法將立即設(shè)置元素為他們的最終狀態(tài),而不是顯示效果。這可能令人滿意的幾個原因:
? jQuery是被用在低資源設(shè)備。
? 動畫使用戶遇到可訪問性問題。
動畫可以通過設(shè)置這個屬性為
false
重新打開。
? stop( [ clearQueue ], [ jumpToEnd ] ): 停止匹配元素當(dāng)前正在運行的動畫。
clearQueue
一個布爾值,指示是否取消以列隊動畫。默認(rèn)
false
。
jumpToEnd
一個布爾值指示是否當(dāng)前動畫立即完成。默認(rèn)
false
.
下面將看到如何通過這些函數(shù)在ASP.NET里面實現(xiàn)一些基礎(chǔ)的動畫效果:
? 實現(xiàn)文字放大的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
鼠標(biāo)移動上去放大字體:
< fieldset id ="content" style ="width: 500px; height: 300px;" >
< asp:Label ID ="lblContent" CssClass ="enlarge" runat ="server" > 世上充滿無數(shù)的選擇和努力,但對于成功,選擇大于努力。敏捷開發(fā)是一種選擇。 </ asp:Label >
</ fieldset >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
var oldSize = parseInt($( " .enlarge " ).css( " fontSize " ));
var newSize = oldSize * 3 ;
$( " #content " ).hover( function () {
$( " .enlarge " ).css( " cursor " , " pointer " );
$( " .enlarge " ).animate({ fontSize: newSize }, 300 );
}, function () {
$( " .enlarge " ).animate({ fontSize: oldSize }, 300 );
});
});
</ script >
< style type ="text/css" >
.enlarge
{
font-size : 12.5px ;
font-family : Arial, Sans-Serif ;
}
</ style >
? 實現(xiàn)圖片淡入淡出的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
< fieldset id ="content" style ="width: 480px; height: 370px;" >
< asp:Image ID ="img1" ImageUrl ="~/images/1.jpg" runat ="server" />
</ fieldset >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
$( " #content " ).hover( function () {
$( " #img1 " ).css( " cursor " , " pointer " );
$( " #img1 " ).fadeOut( 1000 );
}, function () {
$( " #img1 " ).fadeIn( 1000 );
});
});
</ script >
< style type ="text/css" >
#img1
{
width : 438px ;
height : 336px ;
}
</ style >
? 實現(xiàn)頁面元素上下滑動的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
< fieldset style ="width: 400px; height: 150px;" >
< asp:Button ID ="btnSlide" runat ="server" Text ="點擊上下滑動" />
< br />
< br />
< asp:Panel ID ="plSlide" runat ="server" CssClass ="slide" >
看我上下滑動了^_^ </ asp:Panel >
</ fieldset >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
$( " #btnSlide " ).click( function (e) {
e.preventDefault();
/* if ($("#plSlide").is(":hidden")) {
$("#plSlide").slideDown(600);
}
else {
$("#plSlide").slideUp(600);
} */
// 更簡單的實現(xiàn)方法
$( " #plSlide " ).slideToggle( 600 );
});
});
</ script >
< style type ="text/css" >
.slide
{
font-size : 12px ;
font-family : Arial, Sans-Serif ;
display : none ;
background-color : #9999FF ;
height : 100px ;
}
</ style >
? 實現(xiàn)如何阻止當(dāng)前動畫隊列的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
< table border ="0" cellpadding ="3" cellspacing ="3" >
< tr >
< td class ="menuitem" >
菜單1
</ td >
< td class ="menuitem" >
菜單2
</ td >
< td class ="menuitem" >
菜單3
</ td >
< td class ="menuitem" >
菜單4
</ td >
</ tr >
</ table >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
$( " .menuitem " ).hover( function () {
$( this ).animate({ opacity: 0.5 }, " slow " );
}, function () {
// 通過實例可以自己感受下不使用stop()和使用后菜單移動是什么效果
// $(this).animate({ opacity: 1.0 }, "slow");
// 通過使用stop()后,不再會有菜單元素動畫隊列播放的效果
$( this ).stop().animate({ opacity: 1.0 }, " slow " );
});
});
</ script >
< script type ="text/javascript" >
</ script >
< style type ="text/css" >
.menuitem
{
background-color : Gray ;
font-weight : bold ;
color : White ;
text-align : center ;
width : 100px ;
height : 50px ;
cursor : pointer ;
}
</ style >
? 實現(xiàn)元素多個樣式屬改變的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
< fieldset style ="width: 550px; height: 370px;" >
< asp:Button ID ="btnAnimate" runat ="server" Text ="運行動畫" />< br />
< br />
< asp:Panel ID ="plAnimate" runat ="server" CssClass ="contentArea" >
如果真的遇到一個特別大的Story,應(yīng)該適當(dāng)?shù)陌裇tory分解。 </ asp:Panel >
</ fieldset >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
$( " #btnAnimate " ).click( function (e) {
e.preventDefault();
$( " #plAnimate " ).animate({ width: " 500px " ,
height: " 280px " ,
opacity: 0.5 ,
fontSize: " 36px " ,
borderWidth: " 16px "
}, " slow " );
});
});
</ script >
< script type ="text/javascript" >
</ script >
< style type ="text/css" >
.contentArea
{
font-size : 12px ;
font-family : Arial, Sans-Serif ;
width : 200px ;
height : 100px ;
background-color : #9999FF ;
border : solid ;
}
</ style >
? 實現(xiàn)頁面元素連續(xù)運動的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div align ="center" >
< fieldset style ="width: 550px; height: 250px" >
< asp:Button ID ="btnAnimate" runat ="server" Text ="讓下面正方形開始連續(xù)運動" />
< br />
< br />
< asp:Panel ID ="plAnimate" runat ="server" CssClass ="contentArea" >
</ asp:Panel >
</ fieldset >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
/* 按順序定義元素運動規(guī)則:
1.向右移動200px,物體透明度改變?yōu)?.8,運動時間2000ms
2.向上移動100px, 物體透明度改變?yōu)?.5,運動時間1700ms
3.向左移動400px, 物體透明度改變?yōu)?.2,運動時間1200ms
4.向下移動200px, 物體透明度改變?yōu)?,運動時間700ms */
$( function () {
$( " #btnAnimate " ).click( function (e) {
e.preventDefault();
// +=和-=這種表達(dá)式表示在原來的值上做相應(yīng)的運算
$( " #plAnimate " ).animate({ left: " +=200px " , opacity: 0.8 }, 2000 )
.animate({ top: " -=100px " , opacity: 0.5 }, 1700 )
.animate({ left: " -=400px " , opacity: 0.2 }, 1200 )
.animate({ top: " +=200px " , opacity: 1 }, 700 );
});
});
});
</ script >
< style type ="text/css" >
.contentArea
{
width : 60px ;
height : 60px ;
border : solid ;
background-color : #CCCCCC ;
position : relative ;
}
</ style >
? 實現(xiàn)一個二級菜單顯示的動畫效果
頁面代碼:
< form id ="form1" runat ="server" >
< div >
< div class ="menu_head" id ="menu1" >
菜單1 </ div >
< div class ="menu_sub" >
子菜單11 < br />
子菜單12 </ div >
< div class ="menu_head" >
菜單2 </ div >
< div class ="menu_sub" >
子菜單21 < br />
子菜單22 </ div >
< div class ="menu_head" >
菜單3 </ div >
< div class ="menu_sub" >
子菜單31 < br />
子菜單32 </ div >
< div class ="menu_head" >
菜單4 </ div >
< div class ="menu_sub" >
子菜單41 < br />
子菜單42 </ div >
</ div >
</ form >
腳本代碼:
< script type ="text/javascript" >
$( function () {
$( " .menu_head " ).click( function () {
if (parseFloat($( this ).css( " opacity " )) == 1 ) {
$( this ).animate({ opacity: 0.5 , fontSize: " 18px " }, " slow " );
}
else {
$( this ).animate({ opacity: 1 , fontSize: " 15px " }, " slow " );
}
$( this ).next( " .menu_sub " ).slideToggle( " slow " );
});
});
</ script >
< style type ="text/css" >
.menu_head
{
width : 150px ;
height : 30px ;
background-color : #cccccc ;
cursor : pointer ;
font-size : 15px ;
}
.menu_sub
{
width : 150px ;
height : 50px ;
background-color : #9999ff ;
display : none ;
}
</ style >
通過以上示例的學(xué)習(xí),在以后通過jQuery操作動畫效果的時候,希望對你有一定的幫助。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索:z360901061

微信掃一掃加我為好友
QQ號聯(lián)系: 360901061
您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機(jī)微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
