2011-12-07 6 views
2
animé

je suis en train de faire une animation dans jquery,Jquery et vol stationnaire

#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> 

Avec cette fonction, la img.hover est affichée sur le vol stationnaire. C'est la première partie de travail.

$("#wrapper_map img.main").hover(function() { 
     $(this).animate({"opacity": "0"},100); 
    }, function() { 
     $(this).animate({"opacity": "1"},100); 
}); 

Maintenant, je voudrais faire une animation infinie:

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. 

Mais j'ai besoin que lorsque le vol stationnaire de la souris sur un div (.map1, .map2 etc ..) pour montrer la classe img vol stationnaire de la div. Lorsque la souris quitte div wrapper_map redémarre l'animation infinie.

Je veux vraiment faire quelque chose comme ça, mais j'ai besoin d'aide s'il vous plaît !!

Merci beaucoup

Répondre

0

fonction Jquery a paramètre complet complet: Une fonction pour appeler une fois l'animation terminée. maintenant pour l'animation infinie une fois qu'une animation est terminée, vous pouvez appeler une autre fonction qui a animé et ainsi de suite pour faire une animation infinie.

0

vous pouvez le faire:

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

index contrôlent alors ++