2

我正在尝试在 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 时重新启动无限动画。

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

非常感谢

4

2 回答 2

0

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

于 2011-12-07T11:03:45.710 回答
0

你可以这样做： 

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

然后控制索引++

于 2011-12-07T11:21:50.543 回答