JQuery Animate - How to have animation applied to the image that is being hovered over and not all images of the same class?

This is my jQuery code:

$(document).ready(function() {

    $(".bottommrg").mouseenter(function() {
        $(".bottommrg").animate({
            marginTop: '-20px'
        }, {
  开发者_StackOverflow中文版          duration: 500,
            easing: 'easeOutCubic',
            complete: function() {

        $(this).animate({
            marginTop: '0px'
        }, {
            duration: 500,
            easing: 'easeInCubic'
        });

        $(this).animate({
            marginTop: '-10px'
        }, {
            duration: 300,
            easing: 'easeInCubic'
        });

        $(this).animate({
            marginTop: '0px'
        }, {
            duration: 300,
            easing: 'easeInCubic'
        });

    }
});

}).mouseleave(function() {
$("img", this).stop().css({
    marginTop: '0px'
});
});

});

and this is an example image:

<img src="images/car-park.png" class="alignleft bottommrg" alt=""/>

I created a fiddle but for some reason it won't work: http://jsfiddle.net/FGpCP/7/

Anyway, my animation works but when you hover on any image of the same class, they ALL animate when I only want the one that is currently being hovered over to animate.

I realise you could do this using the id tag but then I would have the same code set up 6 times.

Also, what I was trying to do was a sort of bounce effect, it's ok but not perfect, if anyone has any suggestions to make it look better than I would really appreciate them.

I know there is a bounce plugin but I would rather achieve it this way.

Thanks.

Change the way the animate function is setup on mouse enter it should be

 $(yourclass).mouseenter(function() {
    $(this).animate(function()...
    ...);

Does that make sense

Are you embedding the type of easing you are trying to use (easeInCubic) at some point? According to: http://api.jquery.com/animate/ the only "out-of-the-box" values should be "swing" and "linear". (My JS-console says: Object #<Object> has no method 'easeOutCubic' as well so I guess that might be the problem).

See: http://jsfiddle.net/frederikring/BHSxQ/ working

I didn't try this my self but you can see if this works`$(document).ready(function() {

$(".bottommrg").mouseenter(function() {
    $(this).animate({
        marginTop: '-20px'
    }, {
        duration: 500,
        easing: 'easeOutCubic',
        complete: function() {

    $(this).animate({
        marginTop: '0px'
    }, {
        duration: 500,
        easing: 'easeInCubic'
    });

    $(this).animate({
        marginTop: '-10px'
    }, {
        duration: 300,
        easing: 'easeInCubic'
    });

    $(this).animate({
        marginTop: '0px'
    }, {
        duration: 300,
        easing: 'easeInCubic'
    });

}

});`

I changed the second call of the class to this, this way it will execute on the specific element, try this tell me if it works, I can help you further