jquery動畫效果學(xué)習(xí)筆記（8種效果）
1、元素的顯示和隱藏
- display:none; 隱藏
- display:block; 顯示
簡單顯示和隱藏方法
- a) show() 顯示
- b) hide() 隱藏
- c) toggle() 開關(guān)，顯示則隱藏，隱藏則顯示
<script type="text/javascript">
function f1(){
//隱藏
$("div").hide();//display:none
//document.getElementById('id').style.display="none";
}
function f2(){
//顯示
$("div").show();//display:block
}
function f3(){
$("div").toggle();
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關(guān)效果" onclick="f3()" />
</body>
CSS支持兩種方法顯示和隱藏元素，即使用visibility或display樣式，他們控制元素顯示和隱藏的時候效果相同，但是結(jié)果卻不同。
具體說明如下：
- visibility 屬性在隱藏元素的時候，同時會保存元素在文檔流中的影響力，隱藏后元素的未知保持不變。該屬性包括visible(默認(rèn))和hidden兩個值。
- display 隱藏后，隱藏的元素不再占用文檔的位置。
2、滑動效果顯示和隱藏
- slideUp(speed[,callback]) 向上滑動元素并最終隱藏
- slideDown(speed[,callback]) 向下滑動元素并最終顯示
- slideToggle(speed[,callback])
speed：設(shè)置效果的速度(slow（600）normal（400） fast（200） 時間(毫秒))
callback: 效果執(zhí)行完畢之后自動調(diào)用的回調(diào)函數(shù)
<script type="text/javascript">
function f1(){
//隱藏
$("div").slideUp(3000,function(){
alert('我消失了，你能看到么');
});
}
function f2(){
//顯示
$("div").slideDown(3000,function(){
alert('我又回來了');
});//display:block
}
function f3(){
$("div").slideToggle(1000);
}
$(function(){
//氣缸滑動效果
//setInterval("f3()",1000);
});
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div>duck and dog</div>
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關(guān)效果" onclick="f3()" />
</body>
3、淡入淡出效果
讓元素通過一定透明度變化，達(dá)到顯示和隱藏的效果
- fadeIn(speed, [callback])
- fadeOut(speed, [callback])
- fadeToggle(speed, [callback])開關(guān)效果
- fadeTo(speed, opacity, [callback]) 把div設(shè)置一定透明度（0-1）0.3就是30%透明度
<script type="text/javascript">
function f1(){
//隱藏
$("div").fadeOut(4000);
}
function f2(){
//顯示
$("div").fadeIn(4000);
$("#two").fadeTo(2000,0.3);
}
function f3(){
$("div").fadeToggle(2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
</style>
<body>
<div id = "two">duck and dog</div>
<input type="button" value="隱藏" onclick="f1()" />
<input type="button" value="顯示" onclick="f2()" />
<input type="button" value="開關(guān)效果" onclick="f3()" />
</body>
設(shè)置透明度，div的透明度是30%：
4、動畫效果底層方法animate()
show() hide() 等等動畫效果內(nèi)部都是執(zhí)行animate()方法
$().animate(css效果參數(shù)[，時間][，回調(diào)函數(shù)]);
css()等一般jquery方法執(zhí)行完畢之后會返回當(dāng)前jquery對象，因此jquery的許多方法可以鏈?zhǔn)秸{(diào)用。
<script type="text/javascript">
function f1(){
//文字大小、文字粗體、div本身寬度和高度
//font-size background-color color
console.log($("div"));
//jquery對象調(diào)用完畢css方法本身還是一個jquery對象
//說明css方法執(zhí)行完畢有return this關(guān)鍵字
console.log($("div").css('font-weight','bold').css("background-color",'pink'));
var jn = {'font-size':'30px',width:'400px',height:'300px'};
$("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000);
//$("div").animate(jn,2000);
}
</script>
<style type="text/css">
div {width:300px; height:200px; background-color:blue; }
</style>
<body>
<div>duck and dog</div>
<input type="button" value="設(shè)置" onclick="f1()" />
</body>
5、累加累減動畫
如果動畫一次設(shè)定left：500 ,第一次單擊div會左移500像素,第二次單擊就不會動了。累加累減就是連續(xù)動的，只需要將left:”500px”改成left:”+=500px”或者left:”-=500px”即可。
(function(){
$("#panel").click(function(){
$(this).animate({left: "+=500px"}, 3000);
})
})</span>
6、多重動畫
1、同時執(zhí)行多個動畫
上面的例子只控制了left屬性的變化，這回我們在控制left屬性的時候同時控制元素高度變?yōu)?00px
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px",height:"200px"}, 3000);
})
})
2、順序執(zhí)行動畫
上面例子中元素右移和放大高度兩個動畫是同時進(jìn)行的?，F(xiàn)在我們要實(shí)現(xiàn)先右移再放大高度，那很簡單，只需要把上面的animate()方法拆開寫成兩個即可
$(function(){
$("#panel").click(function(){
$(this).animate({left: "500px"},3000)
.animate({height:"200px"},1000);
})
})
3、綜合動畫
接下來完成更復(fù)雜的動畫。單擊div元素后讓他向右移動的同時增大他的高度，并將它的不透明度從50%切換到100%。然后再讓它從上向下移動，同時它的寬度變大，當(dāng)完成這
些效果后讓它以淡出的方式隱藏掉。
$(function(){
$("#panel").css("opacity",0.5);//設(shè)置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000)
.fadeOut(1000);
})
})
7、動畫回調(diào)函數(shù)
在上例中，如果想在最后一步切換css樣式而不是隱藏元素。這我們就可以用到animate的第三個參數(shù)回調(diào)函數(shù)了
$(function(){
$("#panel").css("opacity",0.5);//設(shè)置不透明度
$("#panel").click(function(){
$(this).animate({left: "400px",height:"200px",opacity:"1"},3000)
.animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5px solid blue")});
})
})
這樣就把css方法加入到動畫隊(duì)列中了。
8、停止動畫和判斷是否處于動畫狀態(tài)
1、停止元素的動畫
stop([clearQueue][,gotoEnd]) 兩個都是可選參數(shù)，都是boolean類型
參數(shù)說明：
clearQueue：代表是否清空未執(zhí)行完的動畫隊(duì)列
gotoEnd ：代表是否將正在執(zhí)行的動畫跳到末狀態(tài)
通過一個綜合的示例就可以弄明白stop()方法的這兩個參數(shù)了：
<style type="text/css">
*{margin:0;padding:0;}
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 60px; border: 1px solid #0050D0 ;height:22px;overflow:hidden;}
.head { padding: 5px; background: #96E555; cursor: pointer;width: 300px;}
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block; width:280px;}
</style>
<script src="../../../scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("button:eq(0)").click(function () {
$("#panel")
.animate({height : "150" } , 2000 )
.animate({width : "300" } , 2000 )
.hide(3000)
.animate({height : "show" , width : "show" , opacity : "show" } , 2000 )
.animate({height : "500"} , 2000 );
});
$("button:eq(1)").click(function () {
$("#panel").stop();//停止當(dāng)前動畫，繼續(xù)下一個動畫
});
$("button:eq(2)").click(function () {
$("#panel").stop(true);//清除元素的所有動畫
});
$("button:eq(3)").click(function () {
$("#panel").stop(false,true);//讓當(dāng)前動畫直接到達(dá)末狀態(tài) ，繼續(xù)下一個動畫
});
$("button:eq(4)").click(function () {
$("#panel").stop(true,true);//清除元素的所有動畫，讓當(dāng)前動畫直接到達(dá)末狀態(tài)
});
})
</script>
<body>
<button>開始一連串動畫</button>
<button>stop()</button>
<button>stop(true)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<div id="panel">
<h5 class="head">三國殺殺天下</h5>
<div class="content">
夏侯惇的眼睛，陸遜的聯(lián)營，郭嘉司馬深深的基情
</div>
</div>
</body>
</html>
2、判斷元素是否處于動畫狀態(tài)
當(dāng)使用animate()方法的時候，要避免動畫的累積導(dǎo)致的動畫與用戶的行為不一致的現(xiàn)象。當(dāng)用戶快速在某個元素上執(zhí)行animate()動畫時，就會出現(xiàn)動畫累積。
解決辦法是判斷元素是否正在處于動畫狀態(tài)，當(dāng)不處于動畫狀態(tài)的時候，才為元素添加新的動畫。
用法：
if(!$(element).is(":animated")){
//添加新的動畫
}
通過本文對8種jquery動畫效果的詳細(xì)剖析，玩轉(zhuǎn)jquery動畫效果，希望大家喜歡這篇針對jquery動畫效果進(jìn)行全面介紹的文章。
- 新手學(xué)習(xí)JQuery基本操作和使用案例解析
- jQuery學(xué)習(xí)之DOM節(jié)點(diǎn)的插入方法總結(jié)
- jQuery學(xué)習(xí)筆記之入門
- 想學(xué)習(xí)javascript JS和jQuery哪個重要 先學(xué)哪個
- JQuery學(xué)習(xí)總結(jié)【二】
- JQuery學(xué)習(xí)總結(jié)【一】
- jQuery學(xué)習(xí)筆記——jqGrid的使用記錄（實(shí)現(xiàn)分頁、搜索功能）
- jQuery學(xué)習(xí)心得總結(jié)(必看篇)
- 分享jQuery插件的學(xué)習(xí)筆記
- jQuery學(xué)習(xí)筆記之Ajax用法實(shí)例詳解
- JQuery中使用.each()遍歷元素學(xué)習(xí)筆記
- jQuery從新手到高手的超詳細(xì)學(xué)習(xí)筆記（代碼示例）
相關(guān)文章
jQuery html表格排序插件tablesorter使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery html表格排序插件tablesorter的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本文主要介紹了對稱加密與非對稱加密的優(yōu)缺點(diǎn)，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要為大家詳細(xì)介紹了layui導(dǎo)航欄效果的實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
DropDownList實(shí)現(xiàn)可輸入可選擇（兩種版本可選）
本篇文章主要介紹了DropDownList實(shí)現(xiàn)可輸入可選擇的具體實(shí)現(xiàn)代碼，并附上兩種版本（js版本和jquery版本），可供大家選擇。有需要的朋友可以參考下2016-12-12
JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例
下面小編就為大家?guī)硪黄狫Query 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
快速掌握jquery分頁插件jqPaginator的使用方法
這篇文章主要幫助大家快速掌握jquery分頁插件jqPaginator的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
jQuery實(shí)現(xiàn)的進(jìn)度條效果
本文主要給大家介紹的是jQuery實(shí)現(xiàn)的進(jìn)度效果的實(shí)例代碼，其實(shí)現(xiàn)原理就是使用 Javascript 控制 SPAN CSS 的寬度（以及其他的樣式）有需要的小伙伴可以參考下。2015-07-07
通過jQuery打造支持漢字,拼音,英文快速定位查詢的超級select插件
jQuery 超級select 插件 v3.0.0.0插件 支持漢字、拼音、英文快速定位查詢的超級select插件。可方向鍵、tab 鍵快速選擇。2010-06-06
jQuery實(shí)現(xiàn)導(dǎo)航樣式布局操作示例【可自定義樣式布局】
這篇文章主要介紹了jQuery實(shí)現(xiàn)導(dǎo)航樣式布局操作,可實(shí)現(xiàn)基于jQuery的用戶自定義樣式布局與屬性動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2018-07-07
jQuery實(shí)現(xiàn)HTML5 placeholder效果實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)HTML5 placeholder效果實(shí)例,本文目的主要是在需要兼容一些瀏覽器時使用,需要的朋友可以參考下2014-12-12