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 更改为 class 来尝试这个

   $(".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 标签两次。当您的代码运行时，它会拾取它所涉及的第一个“信息”标签，这是您的第一个图像。

确保使用唯一的 ID 标签，这将有助于解决您的问题。

于 2013-07-09T17:41:58.340 回答