Adding animation to only one instance of a class

Question

I'm working in WordPress and have written a shortcode function in my functions.php file:

// shortcode function for call to action boxes
function actionbox( $atts , $content = null ) {

// Attributes
extract( shortcode_atts(
    array(
        'image' => 'URL',
        'title' => 'Title',
        'url' => 'Link',
    ), $atts )
);

// Code
return '<a class="ctalink" href="' . $url . '">
<div class="ctabox" style="background-image: url(' . $image . '); width: 350px;">
<div class="ctainner">
<div class="titlebox"><h1 class="ctatitle">' . $title . '</h1></div>
<h4 class="ctabutton">' . $content . '</h4>
</div>
</div></a>';
}
add_shortcode( 'CTA', 'actionbox' );

Then I added some jQuery to add animation to the call-to-action boxes created by my shortcode.

Problem is that while everything is working, when I hover over one my boxes, the animation applies itself to all the boxes.

Here is all my code: http://jsfiddle.net/sahiba25/kGryV/4/

Any ideas as to how I could have the animation going on just the one box that I'm actually hovering on?

I've already tried addClass, but it adds the "active" class to all instances of the boxes.

Thanks!

Answer 1

In your event handler, this is the target of the event. So in your case, you could do something like this:

$('.ctainner', this)

which selects elements with a class .ctainner which are descendants of the event target.

Another option would be this:

$(this).find('.ctainner')

which essentially does the same thing.