Jquery одушевленный один div

Question

Я использую несколько экземпляров класса div .item_wrap, который изменяет высоту при наведении курсора на класс изображения .item.

В настоящий момент следующий скрипт анимирует все экземпляры класса div при наведении курсора мыши.,Есть ли способ сделать только текущую живую картинку без анимации остальных?^^;

$(document).ready(function(){
    $(".item").hover(
        function(){
            $('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $('.item_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

html:

<div class="item_wrap">
<a href="images/burgundyholographicgoldsequin.jpg" class="item"  title="image">
<img src="images/burgundyholographicgoldsequin.jpg" width="250" height="192" /></a>
<div class="item_text">Text here</div>
</div> 

Answer 1

Предполагая, что каждый элемент имеет аналогичную связь с item_wrap (например, item_wrap является родителем каждого элемента), тогда вы можете использовать селектор относительно this.

$(document).ready(function(){
    $(".item").hover(
        function(){
            $(this).parent('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
        },    
        function(){
            $(this).parent('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
        }
    );
});

Это, конечно, зависит от вашегоHTML.

Answer 2

Было бы проще, если бы мы могли видеть некоторые из ваших HTML, но вы хотите использовать this с вашим .itemwrap div

Например:

$(document).ready(function(){
$(".item").hover( function(){
$('.item_wrap', this).animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap', this).stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
}); 

По этой ссылке есть похожий вопрос: Как получить дочерние элементы селектора $ (this)?

Answer 3

Нам нужно знать HTML-код вашей страницы, но в целом, если мы предположим, что

<div class="item">
    <div class="item_wrap"></div>
</div>

тогда я бы изменил ваш код на

$(document).ready(function(){
$(".item").hover( function(){
$(this).children('.item_wrap').animate({duration:'slow', easing:'easeOutBack', height:265 }, 500);
},    
function() {
$('.shopitem_wrap').stop().animate({duration:'slow', easing:'easeOutBack', height:200 }, 500);
});
});