jQuery的動畫效果以及圖片切換例項
1.動畫方法說明：
hide() show() //同時修改多個樣式屬性，就是隱藏顯示
fadeIn() fadeOut() //改變透明度顯示隱藏
slideUp() slideDown //改變高度上的顯示隱藏
fadeTo() //只改變透明度，可替代fadeIn fadeOut
toggle() //可替代hide show，輪番切換
slideToggle() //可替代slideUp slideDown
fadeToggle() //可替代fadeIn fadeOut
下面具體說animate() 自定義動畫方法
2.animate() 自定義動畫，格式：animate(params, speed, callback);
如：$(#panel).click(function(){
$(this).animate( {left: "500px", top: "300px"}, 3000 ) //注意以大括弧包括多個引數，key沒有引號，value有引號，在執行這種控制移動的效果時，需要css寫position為relative或者 absolute，回撥函式為可選，即動畫執行完後執行的函式。
})
3.animate可以同時執行多個動畫，也可以順序執行，如上邊例子就是同時執行，如果想順序執行
$(this).animate({left: "500px"}, 3000).animate(top: "300px", 3000); //這叫動畫佇列
4.animate回撥函式，通常用於想改變css樣式，但是css樣式不是動畫加入不了佇列中，就需要函式幫忙
$(this).animate( {left: "500px", top: "300px"}, 3000 ) , function(){ $(this).css("border", "5px solid blue") }; //加入到佇列最後
5.stop([clearQueue, gotoEnd]); 停止當前動畫，跳轉到佇列中的下一步，引數為bool值，是否清空未執行的佇列和到佇列尾端，用於比如滑鼠劃過動畫顯示，但是突然劃出動畫不能立刻改變到劃出狀態
如：
$("#panel").hover(function() {
$(this).stop().animate( {height:"150", width:"300"}, 200 ); //滑鼠劃入時變大，如果突然劃出就stop到下一步
}.function(){
$(this).stop().animate( {height:"22", width:"60"}, 200 ); //滑鼠劃出時變小，如果突然劃入就stop到下一步
}) 以上為同時執行，如果是順序執行的多個動畫，就需要將引數cleaQueue變為true 6.判斷是否處於動畫狀態，在使用animate方法時要避免動畫累積導致的動畫與使用者行為不一致，當用戶快速在某個元素上執行animate動畫時就會出現動畫累積。所以需要判斷，如果不處於動畫狀態，才為元素新增新的動畫，注意這個方法很重要 if (! $(element).is(":animated")) { //如果沒有進行動畫，則 } 7.delay() 允許將佇列中的函式延時執行 例項：$(function(){
var page = 1;
var i = 4; //每版放4個圖片
//向後 按鈕
$("span.next").click(function(){ //繫結click事件
var $parent = $(this).parents("div.v_show");//根據當前點選元素獲取到父元素
var $v_show = $parent.find("div.v_content_list"); //尋找到“視訊內容展示區域”
var $v_content = $parent.find("div.v_content"); //尋找到“視訊內容展示區域”外圍的DIV元素
var v_width = $v_content.width() ;
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數
if( !$v_show.is(":animated") ){ //判斷“視訊內容展示區域”是否正在處於動畫
if( page == page_count ){ //已經到最後一個版面了,如果再向後，必須跳轉到第一個版面。
$v_show.animate({ left : '0px'}, "slow"); //通過改變left值，跳轉到第一個版面
page = 1;
}else{
$v_show.animate({ left : '-='+v_width }, "slow"); //通過改變left值，達到每次換一個版面
page++;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
});
//往前 按鈕
$("span.prev").click(function(){
var $parent = $(this).parents("div.v_show");//根據當前點選元素獲取到父元素
var $v_show = $parent.find("div.v_content_list"); //尋找到“視訊內容展示區域”
var $v_content = $parent.find("div.v_content"); //尋找到“視訊內容展示區域”外圍的DIV元素
var v_width = $v_content.width();
var len = $v_show.find("li").length;
var page_count = Math.ceil(len / i) ; //只要不是整數，就往大的方向取最小的整數
if( !$v_show.is(":animated") ){ //判斷“視訊內容展示區域”是否正在處於動畫
if( page == 1 ){ //已經到第一個版面了,如果再向前，必須跳轉到最後一個版面。
$v_show.animate({ left : '-='+v_width*(page_count-1) }, "slow");
page = page_count;
}else{
$v_show.animate({ left : '+='+v_width }, "slow");
page--;
}
$parent.find("span").eq((page-1)).addClass("current").siblings().removeClass("current");
}
});
});
</script>
</head>
<body>
<div class="v_show">
<div class="v_caption">
<h2 class="cartoon" title="卡通動漫">卡通動漫</h2>
<div class="highlight_tip">
<span class="current">1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="change_btn">
<span class="prev" >上一頁</span>
<span class="next">下一頁</span>
</div>
<em><a href="#">更多>></a></em>
</div>
<div class="v_content">
<div class="v_content_list">
<ul>
<li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/01.jpg" alt="海賊王" /></a><h4><a href="#">海賊王</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/02.jpg" alt="哆啦A夢" /></a><h4><a href="#">哆啦A夢</a></h4><span>播放:<em>33,326</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/03.jpg" alt="火影忍者" /></a><h4><a href="#">火影忍者</a></h4><span>播放:<em>28,276</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li>
<li><a href="#"><img src="img/04.jpg" alt="龍珠" /></a><h4><a href="#">龍珠</a></h4><span>播放 <em>57,865</em></span></li>
</ul>
</div>
</div>
</div>