0

マウスオーバー時に画像を右に移動し、マウスが画像を終了すると静止位置に戻るJavaScriptアニメーションを作成しました。最初の画像では問題なく動作しますが、他の反復を試すと、ホバーした画像ではなく最初の画像が移動します。

HTMLコードは次のとおりです。 

        <div class="sectionJoueur">

            <div class="scroller">

                <figure id="infos" class="nomPositionCourt A">
                    <img src="images/infoMathieuD.png">
                </figure>

                <figure class="img">
                    <img src="images/md.jpg">   
                </figure>

            </div>

        </div>

       <div class="sectionJoueur">

            <div class="scroller">

                <figure id="infos" class="nomPositionCourt B">
                    <img src="images/infoMathieuD.png">
                </figure>

                <figure class="img">
                    <img src="images/md.jpg">   
                </figure>

            </div>

        </div>

        <div class="sectionJoueur">

            <div class="scroller">

                <figure id="infos" class="nomPositionCourt C">
                    <img src="images/infoMathieuD.png">
                </figure>

                <figure class="img">
                    <img src="images/md.jpg">   
                </figure>

            </div>

        </div>

クラス名「class="nomPositionCourt A">」を使用しようとしていますが、ホバリングされている特定の画像をターゲットにしていますが、機能していないようです。

JSコードは次のとおりです。

    function over(){

       if ( $("#infos").hasClass("A") ){   
          $("#infos").stop().animate({"margin-left": +0});
          $(".img").mouseleave(out);
       }
       else if ( $("#infos").hasClass("B") ){
          $("#infos").stop().animate({"margin-left": +0});
          $(".img").mouseleave(out);
       }
    }

    function out(){
       $("#infos").stop().animate({"margin-left": -287});
    }
4

2 に答える 2

0

id一意であると想定される複数の要素に属性を割り当てましたid="infos"クラスは複数の要素に割り当てることができますが、id は一意である必要があります

IDをクラスに変更して、これを試してください

   $(".nomPositionCourt").hover(function(){
   if ( $(this).hasClass("A") ){   
      $(this).stop().animate({"margin-left": +0});
      $(".img").mouseleave(out);
   }
   else if ( $(this).hasClass("B") ){
      $(this).stop().animate({"margin-left": +0});
      $(".img").mouseleave(out);
   }
  },function(){
  $(this).stop().animate({"margin-left": -287});
  })

現在$(this)のホバー画像のオブジェクトがあります

ここに参照があります

于 2013-07-09T17:41:15.770 に答える
0

一見すると、両方の画像が同じ ID タグを使用していることが原因のように見えます (これは悪い習慣です)。

これは私が見ているコードです:

フィギュアID="情報"

同じ ID タグを 2 回使用しています。コードを実行すると、最初に到達した「infos」タグ、つまり最初の画像が取得されます。

必ず一意の ID タグを使用してください。これは問題の解決に役立ちます。

于 2013-07-09T17:41:58.340 に答える