jQuery анимировать только один элемент (div) на hover (img)

Question

Ситуация заключается в том, чтобы jQuery анимации только одного элемента, когда другой зависает. Теперь я получаю все элементы анимации, когда начинается действие наведения.

Код:

<table width="630" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img id="album_action" src="../upload/img/album1.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img id="album_action" src="../upload/img/album2.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
</table> 

JQuery:

$(document).ready(function(){ 
    $("#album_action").hover(function(){ 
     $('.album-back').stop().animate({'margin-left': '150px'}, 400); 
    }, function(){ 
     $('.album-back').stop().animate({'margin-left': '100px'}, 250); 
    }); 
}); 

Когда я наведение Img с идентификатором "#album_action", я получаю ".album-обратно" Диво перемещение. Но анимация начинается для всех элементов «.album-back» div на странице. Как можно оживить только один элемент без ввода разных классов и идентификаторов? Может быть, есть способ установить класс и установить действия внутри только текущего активного (зависающего)? Большое спасибо!

Answer 1

Перво-наперво, вы дали один идентификатор дважды. Идентификатор должен быть уникальным, поэтому только для элемента ONE.

Скорее используйте .album_action чем #album_action.

Во-вторых, зачем использовать стол? Вы не делаете, что с 80-х годов больше :)

Если .action и .Задняя находятся на том же уровне, вы можете использовать JQuery ОТПРЫСКИ

$(document).ready(function(){ 
    $(".album_action").hover(function(){ 
     $(this).siblings('.album-back').stop().animate({'margin-left': '150px'}, 400); 
    }, function(){ 
     $(this).siblings('.album-back').stop().animate({'margin-left': '100px'}, 250); 
    }); 
}); 

Answer 2

id должен быть уникальным, вам нужно использовать class вместо:

<img class="album_action" src="../upload/img/album2.jpg" width="285" height="246" /> 

Затем вы можете использовать $(this) целевой текущий элемент:

$(".album_action").hover(function(){ 
    $(this).prev('.album-back').stop().animate({'margin-left': '150px'}, 400); 
}, function(){ 
    $(this).prev('.album-back').stop().animate({'margin-left': '100px'}, 250); 
}); 

Answer 3

Попробуйте это:

HTML

<table width="630" border="0" cellpadding="0" cellspacing="0"> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img class="album_action" src="../upload/img/album1.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
    <tr> 
     <td style="position:relative;" width="390" height="246"> 
      <div class="album-back"></div> 
      <img class="album_action" src="../upload/img/album2.jpg" width="285" height="246" /> 
     </td> 
     <td width="240"> 
      Description 
     </td> 
    </tr> 
</table> 

В HTML есть только одно изменение, что img id заменяется img class , как is должен быть unique.

SCRIPT

$(document).ready(function(){ 
    $(".album_action").hover(function(){ 
     $('.album-back').stop().animate({'margin-left': '100px'}, 250); 
     $(this).prev('div.album-back').animate({'margin-left': '150px'}, 400); 
    }, function(){ 
     $(this).prev('div.album-back').stop().animate({'margin-left': '100px'}, 250); 
    }); 
}); 

Answer 4

Я предлагаю вам изменить id к class, потому что те же идентификаторы для нескольких элементов на одной странице называются недействительными html.

Попробуйте изменить идентификатор класса:

$(".album_action").hover(function(){ 
    $(this).siblings('.album-back').stop().animate({'margin-left': '150px'}, 400); 
}, function(){ 
    $(this).siblings('.album-back').stop().animate({'margin-left': '100px'}, 250); 
}); 

вы можете использовать .siblings() найти на том же уровне наведен элемента.