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/ function has parameter 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 に答える