JQuery - несколько действий класса

Question

У меня есть простое скользящее окно, скользящее вверх по изображению, чтобы отобразить некоторую информацию, когда вы наводите курсор на изображение. Это работает нормально, но у меня есть несколько изображений на одной странице, поэтому, когда вы наводите курсор на любое из изображений, все поля сдвигаются вверх.

Существует ли простой способ сортировки, чтобы скользило только изображение, над которым вы наводите курсор? Или это в основном создает один и тот же код с разными идентификаторами для каждого эскиза изображения?

Вот jquery - не стесняйтесь исправлять любые ошибки в этом фрагменте, так как я очень новичок в этом

$('#gallery-inner .thumb .gallery-inner-thumb').hide(); 
$("#gallery-inner .thumb").hover(function () {
    $("#gallery-inner .thumb .gallery-inner-thumb").show().animate({margin:'-36px 0 0'},'fast');
    }, function () { 
    $("#gallery-inner .thumb .gallery-inner-thumb").animate({margin:'1px 0 0'},'fast');
});

и вот блок html.

<div class="thumb clearfix">
    <div class="image">
        <a href="#" title="#"><img src="images/simg/pimg.jpg" alt="#"></a>

        <div class="gallery-inner-thumb clearfix">
            <div class="name"><a href="#">Image Name</a></div>
            <div class="comments"><a href="#">0</a></div>
        </div>

    </div>
</div>

Спасибо

Answer 1

jQuery передает целевой элемент обработчикам событий как this. Поэтому вы можете сделать что-то вроде:

$("#gallery-inner .thumb").hover(function() // mouse over target
   {
      // select child of target .thumb with class .gallery-inner-thumb
      $(".gallery-inner-thumb", this)  
         .show().animate({margin:'-36px 0 0'},'fast');
   }, 
   function() // mouse off of target
   { 
      // select child of target .thumb with class .gallery-inner-thumb
      $(".gallery-inner-thumb", this)
      .animate({margin:'1px 0 0'},'fast');
   });

... и он будет работать для каждого эскиза индивидуально. Ключ здесь указывает контекст (this - цель события) для функции jQuery при выборе дочерних элементов для показа / анимации.