一、show()方法和hide()方法
1.show()與hide()
show():根據hide()方法記住的display屬性值來顯示元素。
hide() : 將該元素的display樣式改爲 “none”。
2.參數讓元素動起來:
調用show()和hide()相當於css(“display”,“none/block/inline”),不會有任何動畫。如果希望調用元素慢慢顯示/消失,則可以爲show()/hide()方法指定一個速度參數.
參數:slow,normal,fast,數值(以毫秒爲單位)
$("element").show("slow"); //元素將在600毫秒內慢慢地顯示出來
$("element").show("normal"); //元素將在400毫秒內慢慢地顯示出來
$("element").show("fast"); //元素將在200毫秒內慢慢地顯示出來
$("element").hide("1000"); //元素將在1000毫秒(1秒)內慢慢地隱藏
注意:對元素使用帶參數的show()和hide()是從:高度,寬度,不透明度 三個屬性同時進行操作的。
二、fadeIn()方法和fadeOut()方法
fadeIn()/fadeOut() 只改變元素的不透明度。
1.fadeOut() :會在指定的一段時間內降低元素的不透明度,直到元素完全消失(“display:none”)。
2.fadeIn() :與fadeOut()完全相反。
$("#panel h5.head").toggle(function(){
$(this).next("div.content").fadeOut();
},function(){
$(this).next("div.content").fadeIn();
});
三、slideUp()方法和slideDown()方法
slideUp()/slideDown()只改變元素的高度。
1.slideDown():如果一個元素的display屬性值爲"none",當調用slideDown()時,這個元素將由上至下延伸顯示。
2.slideUp() :與slideDown()完全相反。
$("#panel h5.head").toggle(function(){
$(this).next("div.content").slideUp();
},function(){
$(this).next("div.content").slideDown();
});
四、自定義動畫方法animate()
語法:animate(params, speed ,callback);
參數說明:
(1)params: 一個包含樣式屬性及值的映射,比如{property1: “value1”, property2: “value2”, ····· }
(2)speed : 速度參數,可選。
(3)callback:在動畫完成時執行的函數,可選。
1.自定義簡單動畫
例當點擊id="panel"的div時該div就會向右運動。
<head>
<style>
#panel{
position:relative;
width:100px;
height:100px;
border:1px solid #0050D0;
}
</style>
</head>
<div id="panel">click me</div>
<script>
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"},3000);
});
});
</script>
2.累加、累減動畫
將上例jQuery代碼改爲 (在500px之前加上"+=“或”-=",即表示在當前位置累加或者類減)
$(function(){
$("#panel").click(function(){
$(this).animate({left:"+=500px"},3000);
});
});