Question

I have pretty simple jquery code :

 $(document).ready(function(){
        $('img.marqFl').on({
            mouseenter: function() {
                $(this).animate({height: 300}, 600);
            },
            mouseleave: function() {
                $(this).animate({height: 150}, 600);
            }
        }); 

    });

But its not doing what I want..

I have 10 images with the same class – marqFl. They all have 150height.
When users move mouse over some image, it should start increasing height to 300.

But if they move mouse out from the image it should stop and start decreasing back to 150.
And if they move mouse back to the image it should stop decreasing and start increasing again.
For those both cases the old animation must be breaked. Users should not wait for the previous animation to end to start the new one.

If they move mouse to other image the first 1 must go directly (no animation) to 150 and the new image should start increasing.

Answer 1

Use stop function:

$(this).stop().animate({height: 300}, 600);