animation on objects with the same class, one at a time

Question

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>

Answer 1

Generally Speaking they way you would accomplish 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.