Question

我创建了一个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“＆gt;”目标是悬停在特定图像上但似乎没有效果。

以下是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});
    }

Answer 1

您已将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)中，您拥有当前悬停图像的对象

以下是Reference

Answer 2

乍一看，原因似乎是你的两张图片都使用相同的ID标签（这是不好的做法）。

这是我正在查看的代码：

图id =“infos”

您正在使用相同的ID标记两次。当您的代码运行时，它会获取它的第一个“信息”标记，这是您的第一张图片。

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

Javascript鼠标悬停/鼠标移动动画仅适用于第一次迭代

2 个答案: