javascript - animation on objects with the same class, one at a time - Stack Overflow

im trying to run an animation hover effect on all elements on a page. my problem is, when i hove over any of them, it animates them all.

$('div.anime').hover( function() {
$('.box').animate({'do something cool'});
});

All of the boxes have the same class anime. So im just trying to figure out how to only animate when you hover over one, with out giving them all separate classes you know?

I know this is a simple question, but im still learning the ways of jQuery :) so please bear with me

Here's the HTML:

<div class="anime">

<div class="box">Hey show me! Im cool!</div>
</div>

im trying to run an animation hover effect on all elements on a page. my problem is, when i hove over any of them, it animates them all.

$('div.anime').hover( function() {
$('.box').animate({'do something cool'});
});

All of the boxes have the same class anime. So im just trying to figure out how to only animate when you hover over one, with out giving them all separate classes you know?

I know this is a simple question, but im still learning the ways of jQuery :) so please bear with me

Here's the HTML:

<div class="anime">

<div class="box">Hey show me! Im cool!</div>
</div>

• javascript
• jquery
• jquery-animate

Share Improve this question Follow edited Aug 29, 2011 at 21:05 jondavidjohn 62.4k2121 gold badges120120 silver badges159159 bronze badges asked Mar 25, 2011 at 4:18 SinSin 26522 gold badges77 silver badges2020 bronze badges 2

• 1 Could you show a portion of your HTML that includes at least one div.anime and .box? – mVChr Commented Mar 25, 2011 at 4:20
• hah! i guessed correctly on your html setup. – jondavidjohn Commented Mar 25, 2011 at 4:31

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Generally Speaking they way you would acplish this would be to use the this keyword to specify the item being hovered, and then choose the DOM element you want to animate in relation to this by traversing the DOM tree.

example

given the following HTML

<div class="anime">

    <p>other stuff</p>

    <div class="box">
        <p>content</p>
    </div>

</div>

This javascript (using jQuery) would select and animate only the .box contained within the hovered upon .anime because I'm using the .find() function to traverse the DOM in relation to $(this) (the element that was hovered).

$('div.anime').hover( function() {
    $(this).find('.box').animate({'do something cool'});
});

You can read more and find more functions for Traversing the DOM here.

try using function each of jquery

$( "div.anime" ).each(function(){

$(this).hover( function() {
   $(this).find('.box').animate({'do something cool'});
});

});

In javascript, you can capture the target of an event with 'this'. Using 'this' will restrict the animate method to the object being acted on.

$('div.anime').hover(function(e){
   $(this).animate({'do something cool'});

}, function(){
   // dont forget on mouseout
   $(this).animate({'return to normal state'});

})

$('div.anime .box').hover( function() {
$(this).animate({'do something cool'});
});