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类悬停时。当鼠标退出div wrapper_map时，重启无限动画。

我真的想做这样的事，但我需要帮助！

非常感谢

Answer 1

Jquery http://api.jquery.com/animate/函数有参数完成完成：动画完成后调用的函数。现在无限动画一旦动画完成，你可以调用另一个有动画的函数等等，以制作无限的动画。

Answer 2

你可以这样做：

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

然后控制索引++

Jquery动画和悬停

2 个答案: