CODEWITHSUNDEEP
jqueryjquery-animateeasing
Moozoo
Moozoo

Reputation: 497

Jquery animate single div

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>

Upvotes: 1

Views: 820

Answers (3)

minboost
minboost

Reputation: 2563

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.

Upvotes: 1

Gregg B
Gregg B

Reputation: 13727

It would be easier if we could see some of your html, but you want to use this with your .itemwrap div

For instance:

$(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 link has a similar question: How to get the children of the $(this) selector?

Upvotes: 0

zaoudis
zaoudis

Reputation: 120

We would need to know the html of your page, but in general if we assume that 

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

then i would change your code to 

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

Upvotes: 0

Related Questions