Jquery------動畫

一、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);
     });
});
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章