Jquery 动画和悬停

Question

我正在尝试用 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 等)上时我需要显示该 div 的 img 类悬停。当鼠标退出 divwrapper_map 时重新启动无限动画。

我真的很想做这样的事情，但我需要帮助!!

非常感谢

Answer 1

Jquery http://api.jquery.com/animate/函数有参数complete complete:动画完成后调用的函数。现在，对于无限动画，一旦动画完成，您可以调用另一个具有animate等的函数来制作无限动画。 p>