2011-12-07 129 views
2

我試圖做一個動畫jQuery中,jQuery的動畫和懸停

#wrapper_map div { width:94px; height:265px; float:left; cursor:pointer; position:relative;} 
img.main {position: absolute;left:0;top:0;z-index:10;} 
img.hover {position:absolute;left:0;top:0;} 

<div id="wrapper_map"> 
    <div class="map1"><a href="#"><img class="main" src="1.gif" ><img class="hover" src="h_1.gif"></a></div> 
    <div class="map2"><a href="#"><img class="main" src="2.gif" ><img class="hover" src="h_2.gif"></a></div> 
    <div class="map3"><a href="#"><img class="main" src="3.gif" ><img class="hover" src="h_3.gif""></a></div> 
    <div class="map4"><a href="#"><img class="main" src="4.gif" ><img class="hover" src="h_4.gif"></a></div> 
    <div class="map5"><a href="#"><img class="main" src="5.gif" ><img class="hover" src="h_5.gif"></a></div> 
</div> 

使用此功能,img.hover上懸停顯示。這是第一個工作部分。

$("#wrapper_map img.main").hover(function() { 
     $(this).animate({"opacity": "0"},100); 
    }, function() { 
     $(this).animate({"opacity": "1"},100); 
}); 

現在我想提出一個無限動畫:

Show then hide ".map1 img.hover" when it's finish, 
Show then hide ".map2 img.hover" when it's finish, 
Show then hide ".map3 img.hover" when it's finish, 
Show then hide ".map4 img.hover" when it's finish, 
Show then hide ".map5 img.hover" when it's finish, resart the animation. 

但我需要爲:當在一個div(.map1,.map2等)鼠標懸停顯示IMG類懸停的分區。 鼠標退出div wrapper_map重新啓動無限動畫。

我真的想做這樣的事情,但我需要幫助!

非常感謝

回答

0

jQuery的函數參數齊全完成:一個函數調用一次在動畫完成。現在用於無限動畫,一旦動畫結束,您可以調用另一個具有動畫效果的功能,以製作無限動畫。

0

你可以這樣做:

option.imgs.filter(':visible').hide(); 
option.imgs.eq(index).show(); 

然後控制指標++