1.顯示和隱藏hide()和show()
對於動畫來說，顯示和隱藏是最基本的效果之一，本節簡單介紹jQuery的顯示和隱藏。
代碼如下:
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(); //隱藏
});
$("input:last").click(function() {
$("p").show(); //顯示
});
});
</script>
<input type="button" value="Hide">
<input type="button" value="Show">
<p>點擊按鈕，看看效果</p>
<div><em>本節主要降級和學習jQuery的自動顯隱，漸入漸出、飛入飛出。自定義動畫等。 1.顯示和隱藏hide()和show() 對於動畫來說，顯示和隱藏是最基本的效果之一，本節簡單介紹jQuery的顯示和隱藏。</em>
</div>
以上是對hide()和show()函數的測試。
2.使用show()、hide()和toggle()方法
上個例子對show()和hide()方法做了簡單介紹，其實這兩個方法可以接受參數控制顯隱藏過程。
語法如下
show(duration,[callback]);
hide(duration,[callback]);
其中，duration表示動畫執行時間的長短，可以表示速度的字符串，包括slow,normal,fast.也可以是表示時間的整數(毫秒)。callback是可選的回調函數。在動畫完成之後執行。
代碼如下:
<script type="text/javascript">
$(function() {
$("input:first").click(function() {
$("p").hide(300); //隱藏
});
$("input:last").click(function() {
$("p").show(500); //顯示
});
});
</script>
例子和第一個例子相同，只是對hide()和show()增加了時間參數。其實toogle()也可以加入事件參數。
2.使用fadeIn()和fadeOut()方式
對於動畫效果顯隱，jQuery還提供了fadeIn()個fadeOut這兩個實用的方法，他們的動畫效果類似褪色，語法與slow()和hide()完全相同。
fadeIn(duration, [callback]);
fadeOut(duration, [callback]);
例子
代碼如下:
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(3000); //逐漸fadeOut
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000); //逐漸fadeIn
});
});
</script>
<img src="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.jpg">
<input type="button" value="Hide">
<input type="button" value="Show">
fadeTo()方法的使用。
fadeTo() 方法將被選元素的不透明度逐漸地改變為指定的值。
例子：
代碼如下:
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("img").fadeOut(1000);
});
$("input:eq(1)").click(function() {
$("img").fadeIn(1000);
});
$("input:eq(2)").click(function() {
$("img").fadeTo(1000, 0.5);
});
$("input:eq(3)").click(function() {
$("img").fadeTo(1000, 0);
});
});
</script>
<p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">
fadeOut相關參數
speed
可選。規定元素從當前透明度到指定透明度的速度。
可能的值：
毫秒 （比如 1500）
"slow"
"normal"
"fast"
opacity 必需。規定要淡入或淡出的透明度。必須是介於 0.00 與 1.00 之間的數字。
callback
可選。fadeTo 函數執行完之後，要執行的函數。
如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這一章。
除非設置了 speed 參數，否則不能設置該參數。
3.幻燈片slideUp和slideDown效果
代碼如下:
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
$("div").add("img").slideUp(1000);
});
$("input:eq(1)").click(function() {
$("div").add("img").slideDown(1000);
});
$("input:eq(2)").click(function() {
$("div").add("img").hide(1000);
});
$("input:eq(3)").click(function() {
$("div").add("img").show(1000);
});
});
</script>
<input type="button" value="SlideUp">
<input type="button" value="SlideDown">
<input type="button" value="Hide">
<input type="button" value="Show"><br>
<div></div><img src="04.jpg">
前面提到了幾種動畫效果，jQuery還提供了slideUp()和slideDown()來模擬PPT中的類似幻燈片拉簾效果，它與slow()和hide()完全相同。
以上代碼定義了一個div和一個img,用add方法組合在一起。
4.自定義動畫
考慮到框架的通用性及代碼文件的大小，jQuery不能涵蓋所有的動畫效果，但它提供了animate()方法，能夠使開發者自定義動畫。本節主要通過介紹animate()方法的兩種形式及應用。
animate()方法給開發者很大的空間。它一共有兩種形式。第一種形式比較常用。用法如下
animate(params,[duration],[easing],[callback])
其中params為希望進行變幻的css屬性列表，以及希望變化到的最終值，duration為可選項，與show()/hide()的參數含義完全相同。easing為可選參數，通常供動畫插件使用。 用來控制節奏的變化過程。jQuery中只提供了linear和swing兩個值.callback為可選的回調函數。在動畫完成後觸發。
需要注意。params中的變量遵循camel命名方式。例如paddingLeft不能寫成padding-left.另外，params只能是css中用數值表示的屬性。例如width.top.opacity等
像backgroundColor這樣的屬性不被animate支持。
代碼如下:
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
}
</style>
<script type="text/javascript">
$(function() {
$("button").click(function() {
$("#block").animate({
opacity: "0.5",
width: "80%",
height: "100px",
borderWidth: "5px",
fontSize: "30px",
marginTop: "40px",
marginLeft: "20px"
}, 2000);
});
});
</script>
<button id="go">Go>></button>
<div id="block">動畫！</div>
在params中，jQuery還可以用“+=”或者"-="來表示相對變化。如
代碼如下:
<style>
div {
background-color: #FFFF00;
height: 40px;
width: 80px;
border: 1px solid #000000;
margin-top: 5px;
padding: 5px;
text-align: center;
position: absolute;
}
</style>
<script type="text/javascript">
$(function() {
$("button:first").click(function() {
$("#block").animate({
left: "-=80px" //相對左移
}, 300);
});
$("button:last").click(function() {
$("#block").animate({
left: "+=80px" //相對右移
}, 300);
});
});
</script>
<button >Go>></button>
<button >Go>></button>
<div id="block">動畫！</div>
先將div進行絕對定位，然後使用animate()中的-=和+=分別實現相對左移和相對右移。
animate()方法還有另外一種形式，如下所示：
animate(params,options)
其中，params與第一種形式完全相同，options為動畫可選參數列表，主要包括duration,esaing，callback,queue等，其中duration.easing.callback與第一種形式完全一樣，queue為布爾值，表示當有多個 animate()組成jQuery時，當前animate()緊接這下一個animate(),是按順序執行(true)還是同時觸發false
如下例子，展示了animate()第二種用法。
代碼如下:
<style>
div {
background-color: #FFFF22;
width: 100px;
text-align: center;
border: 2px solid #000000;
margin: 3px;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
}
input {
border: 1px solid #000033;
}
</style>
<script type="text/javascript">
$(function() {
$("input:eq(0)").click(function() {
//第一個animate與第二個animate同時執行，然後再執行第三個
$("#block1").animate({
width: "90%"
}, {
queue: false,
duration: 1500
})
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(1)").click(function() {
//依次執行三個animate
$("#block2").animate({
width: "90%"
}, 1500)
.animate({
fontSize: "24px"
}, 1000)
.animate({
borderRightWidth: "20px"
}, 1000);
});
$("input:eq(2)").click(function() {
$("input:eq(0)").click();
$("input:eq(1)").click();
});
$("input:eq(3)").click(function() {
//恢復默認設置
$("div").css({
width: "",
fontSize: "",
borderWidth: ""
});
});
});
</script>
<input type="button" id="go1" value="Block1動畫">
<input type="button" id="go2" value="Block2動畫">
<input type="button" id="go3" value="同時動畫">
<input type="button" id="go4" value="重置">
<div id="block1">Block1</div>
<div id="block2">Block2</div>
以上兩個div塊同時運用了三個動畫效果，其中第一個div快的第一個動畫添加了queue:false參數，使得前兩項兩個動畫同時執行。可以通過重置反復測試，熟悉animate()第二種形式。
以上就是本文的全部內容了，希望大家能夠喜歡。