我試圖做一個動畫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重新啓動無限動畫。
我真的想做這樣的事情,但我需要幫助!
非常感謝