2011-12-07 5 views
2

私はjqueryのアニメーションを作成しようとしている、jQueryのは、アニメーションとimg.hoverがホバーに表示されます。この機能により

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

を合わせます。それが最初の作業部分です。

$("#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を終了すると、無限のアニメーションが再開します。

私は本当にこのようなことをしたいと思いますが、私は助けてください!アニメーションが完了すると、呼び出す関数:

おかげでたくさん

答えて

0

jqueryの関数は、パラメータの完全な完全を持っています。無限アニメーションのアニメーションが終了したら、アニメーションなどを持った別の関数を呼び出して、無限のアニメーションを作成することができます。あなたがそれを行うことができます

0

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

、インデックス++

を制御
関連する問題