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. Когда мышь выйдет из div wrapper_map, перезапустите бесконечную анимацию.

Я очень хочу сделать что-то подобное, но мне нужна помощь, пожалуйста!

Большое спасибо