Javascript mouseover/mouseout анимация, работающая только для первой итерации

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> 

Я пытаюсь использовать имена классов «класс =» nomPositionCourt А «>» целевой конкретный образ того витали на но это не похоже, работают.

Вот код 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" класс может быть присвоен нескольким элементам, но идентификатор должен быть уникальным

Попробуйте это, изменив идентификатор класса

$(".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

На первый взгляд, это выглядит как причина в том, что оба ваших изображений используют один и тот же идентификатор тега (который является плохой практикой) ,

Это код, который я смотрю на:

фигурного ид = «информация о»

Вы используете тот же идентификатор тег дважды. Когда ваш код запускается, он подбирает первый «информационный» тег, к которому он относится, который является вашим первым изображением.

Обязательно используйте уникальные идентификационные метки, и это поможет решить вашу проблему.