jQuery學(xué)習(xí)筆記之jQuery的動畫

更新時(shí)間：2010年12月22日 14:39:30 作者：

jQuery學(xué)習(xí)筆記之jQuery的動畫，需要的朋友可以參考下。

一.系統(tǒng)預(yù)定義的動畫函數(shù)

1.顯示隱藏函數(shù)
show(); //顯示元素(同時(shí)增加寬、高、不透明度)
hide(); //隱藏元素
執(zhí)行hide()隱藏界面元素，相當(dāng)于將css樣式中的display:none.

我們也可以在函數(shù)中加入?yún)?shù)，具體如下：
show("slow");
除了slow取值外，還可以設(shè)置為normal,fast,分別代表時(shí)間為600，400，200毫秒

我們也可以加如具體時(shí)間取值。具體如下：

slow(1000);
這樣代表時(shí)間完全顯示出元素的時(shí)間間隔為1000毫秒

2.不透明度函數(shù)
fadeIn();//逐漸顯示元素（只增加不透明度）
fadeOut();//逐漸隱退元素

3.高寬度函數(shù)
slideDown();//逐漸增加元素高度(只增加元素高度)
slideUp();//逐漸縮短元素高度

二.自定義動畫函數(shù)

animate(params,speed,callback);
params:取值為一個(gè)樣式屬性和取值的映射
speed:速度
callback:動畫完成時(shí)的執(zhí)行函數(shù)

其中params的樣式屬性取值可以是多個(gè)屬性，也可以是累增，累減的取值
例子：

復(fù)制代碼代碼如下:

 
$(function(){ 
$(#id1).click(function(){ 
$(this).animate({left:"+=500px",height:"200px"},3000,function(){ 
$(this).css("border","5px solid blue") 
}) 
}) 
}) 

1.停止元素動畫
stop();
結(jié)束當(dāng)前執(zhí)行的動畫，并立即執(zhí)行下面定義的動畫

2.判斷是否在動畫狀態(tài)
is(":animate")

3.其他動畫函數(shù)
toggle(speed,callback);//立即切換元素狀態(tài)(高，寬，不透明度)，如果隱藏則切換到顯示，如果顯示則切換的隱藏
sildeToggle(speed,callback);//改變高度方式切換元素狀態(tài)
fadeto(speed,opacity,callback);切換到指定的不透明度值

您可能感興趣的文章:

jQuery

相關(guān)文章

基于jquery實(shí)現(xiàn)鼠標(biāo)滾輪驅(qū)動的圖片切換效果
這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)滾輪驅(qū)動的圖片切換效果，操作簡單，適合用在產(chǎn)片展示網(wǎng)站中，需要的朋友可以參考下
2015-10-10
jQuery-Easyui 1.2 實(shí)現(xiàn)多層菜單效果的代碼
早上打開郵箱，一位朋友問我之前JQuery-Easyui 怎么做可以實(shí)現(xiàn)多級菜單
2012-01-01
JQuery實(shí)現(xiàn)電梯導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)電梯導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
輕松學(xué)習(xí)jQuery插件EasyUI EasyUI實(shí)現(xiàn)拖動基本操作
這篇文章主要幫大家輕松學(xué)習(xí)jQuery插件EasyUI，并利用EasyUI實(shí)現(xiàn)拖動基本操作，文章并提供了一個(gè)學(xué)校課程表簡單實(shí)例，感興趣的小伙伴們可以參考一下
2015-11-11
jquery獲取當(dāng)前點(diǎn)擊對象的value方法
這篇文章主要介紹了jquery如何獲取當(dāng)前點(diǎn)擊對象的value,需要的朋友可以參考下
2014-02-02
jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下
2015-07-07
jQuery的中 is('':visible'') 解析及用法(必看)
下面小編就為大家?guī)硪黄猨Query的中 is(':visible') 解析及用法(必看)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
jquery禁用右鍵單擊功能屏蔽F5刷新
這篇文章主要介紹了jquery禁用右鍵單擊功能屏蔽F5刷新的具體實(shí)現(xiàn),需要的朋友可以參考下
2014-03-03
ASP.NET jQuery 實(shí)例10 動態(tài)修改hyperlink的URL值
這節(jié)我們來看下如何實(shí)現(xiàn)通過選擇RadioButtonList值動態(tài)改變hyperlink控件的URL值，并簡要介紹bind和live方法的區(qū)別
2012-02-02
jQuery創(chuàng)建DOM元素實(shí)例解析
這篇文章主要介紹了jQuery創(chuàng)建DOM元素的方法,實(shí)例分析了jQuery使用$直接創(chuàng)建DOM元素的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-01-01