JQuery селекторы

Question

У меня проблемы с выбором div, который я хочу анимировать в jquery.У меня есть этот HTML

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img id="slide" src="../../pictures/picture.jpg"><div id="name">Picture name</div></div>  
</a>  
</div> 

Я использовал эту разметку, потому что я хочу скользить вверх по имени на картинке при наведении курсора.У меня есть 3 изображения в строке и 8 строк, и мой jquery ориентирован только на первое изображение.

$('#slide').hover(function(){
$(this).parent().find('#name').animate({"bottom" : 0}, 800)
}, function(){
$(this).parent().find('#name').animate({"bottom" : "-20px"}, 800)
});

Я даже пытался использовать $ ('# perimg'). Children (), но это тоже не помогло.

Answer 1

Поскольку вы хотите анимировать несколько изображений и элементов div, используйте классы вместо идентификаторов. Также ваш код неверен, попробуйте это:

HTML:

<div id="perimg">  
<a class="false" href="show_model.php?param=Addison">  
<div id="name_container"><img class="slide" src="../../pictures/picture.jpg"><div class="name">Picture name</div></div>  
</a>  
</div> 

JQuery:

$('.slide').hover(function(){
  $(this).find('.name').animate({"bottom" : 0}, 800)
  }, function(){
  $(this).find('.name').animate({"bottom" : "-20px"}, 800)
});

Answer 2

jQuery выберет только первый соответствующий элемент при проверке по ID, но выберет все при проверке класса.Что происходит с вами, так это то, что он получает только первое изображение, потому что вы ищете конкретный идентификатор.Просто измените его на использование классов, и оно должно работать.