Question

This is my jQuery code:

$(document).ready(function() {

    $(".bottommrg").mouseenter(function() {
        $(".bottommrg").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'
        });

    }
});

}).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.

Answer 1

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

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

Does that make sense