Question

I am using multiple instances of div class .item_wrap, which changes height when the image class .item is hovered over.

At the moment, the following script animates all instances of the div class on mouse hover. Is there a way to have only the current hovered div animate, without the rest animating at the same time? ^^;

$(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);
        }
    );
});

the 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

Assuming each item has a similar relationship with item_wrap (e.g. item_wrap is the parent of each item) then you can use a selector relative to 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);
        }
    );
});

This, ofcourse, depends on your HTML.