Jquery 动画和悬停答案

【问题标题】：Jquery animate and hoverJquery 动画和悬停
【发布时间】：2011-12-07 10:55:22
【问题描述】：

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

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

非常感谢

【问题讨论】：

标签： jquery mouse jquery-animate jquery-hover

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以这样做：

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

然后控制索引++

【讨论】：