jQuery提供能很多實現頁面動畫效果的工具函數，使用這些函數，能更好的提高用戶體驗。
首先，我們來看下，jQuery給我們提供的一些基礎的動畫函數：
? animate( properties, [ duration ], [ easing ], [ callback ] )： 執行一個CSS屬性設置的自定義動畫
? properties ：一組CSS屬性，動畫將朝著這組屬性移動。
? duration ：一個字符串或者數字決定動畫將運行多久 。
? easing ：要使用的擦除效果的名稱(需要插件支持).默認jQuery提供"linear" 和 "swing"。
? callback： 在動畫完成時執行的函數。
? fadeIn( [ duration ], [ callback ] )： 通過淡入的方式顯示匹配元素。
? fadeOut( [ duration ], [ callback ] )： 通過淡出的方式顯示匹配元素。
? slideUp( [ duration ], [ callback ] )： 用滑動動畫隱藏一個匹配元素。
? slideDown( [ duration ], [ callback ] )： 用滑動動畫顯示一個匹配元素。
? slideToggle( [ duration ], [ callback ] )： 用滑動動畫顯示或隱藏一個匹配元素。
?
jQuery.fx.off：
當這個屬性設置為
true
的時候，調用時所有動畫方法將立即設置元素為他們的最終狀態，而不是顯示效果。這可能令人滿意的幾個原因：
? jQuery是被用在低資源設備。
? 動畫使用戶遇到可訪問性問題。
動畫可以通過設置這個屬性為
false
重新打開。
? stop( [ clearQueue ], [ jumpToEnd ] )： 停止匹配元素當前正在運行的動畫。
clearQueue
一個布爾值，指示是否取消以列隊動畫。默認
false
。
jumpToEnd
一個布爾值指示是否當前動畫立即完成。默認
false
.
下面將看到如何通過這些函數在ASP.NET里面實現一些基礎的動畫效果：
? 實現文字放大的動畫效果
頁面代碼：
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
鼠標移動上去放大字體：
<
fieldset
id
="content"
style
="width: 500px; height: 300px;"
>
<
asp:Label
ID
="lblContent"
CssClass
="enlarge"
runat
="server"
>
世上充滿無數的選擇和努力，但對于成功，選擇大于努力。敏捷開發是一種選擇。
</
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
>
? 實現圖片淡入淡出的動畫效果
頁面代碼：
<
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
>
? 實現頁面元素上下滑動的動畫效果
頁面代碼：
<
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);
}
*/
//
更簡單的實現方法
$(
"
#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
>
? 實現如何阻止當前動畫隊列的動畫效果
頁面代碼：
<
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
>
? 實現元素多個樣式屬改變的動畫效果
頁面代碼：
<
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，應該適當的把Story分解。
</
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
>
? 實現頁面元素連續運動的動畫效果
頁面代碼：
<
form
id
="form1"
runat
="server"
>
<
div
align
="center"
>
<
fieldset
style
="width: 550px; height: 250px"
>
<
asp:Button
ID
="btnAnimate"
runat
="server"
Text
="讓下面正方形開始連續運動"
/>
<
br
/>
<
br
/>
<
asp:Panel
ID
="plAnimate"
runat
="server"
CssClass
="contentArea"
>
</
asp:Panel
>
</
fieldset
>
</
div
>
</
form
>
腳本代碼：
<
script
type
="text/javascript"
>
$(
function
() {
/*
按順序定義元素運動規則：
1.向右移動200px，物體透明度改變為0.8，運動時間2000ms
2.向上移動100px, 物體透明度改變為0.5，運動時間1700ms
3.向左移動400px, 物體透明度改變為0.2，運動時間1200ms
4.向下移動200px, 物體透明度改變為1，運動時間700ms
*/
$(
function
() {
$(
"
#btnAnimate
"
).click(
function
(e) {
e.preventDefault();
//
+=和-=這種表達式表示在原來的值上做相應的運算
$(
"
#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
>
? 實現一個二級菜單顯示的動畫效果
頁面代碼：
<
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
>
通過以上示例的學習，在以后通過jQuery操作動畫效果的時候，希望對你有一定的幫助。
?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
