CODEWITHSUNDEEP
jquery
Nick
Nick

Reputation: 2549

jQuery - Stop function being triggered again until it's stopped running

I have a bit of code that basically zooms into an image on mouseover and then resets on mouseleave.

My only issue is that if you mouseover/leave quickly the function runs and runs and runs that many times.

Is there any way to prevent the function from firing if it's currently animating?

I understand this can be done with CSS but I need to be able to support all browsers back to IE8 so that's not an option (Annoyingly)

Thanks!!

$(document).ready(function () {
        $('.image img').on("mouseover", function () {
            $(this).animate({
                height: "110%",
                width: "110%",
                marginLeft: "-5%",
                marginTop: "-5%"
            }, 1000);
        });

        $('.image img').on("mouseleave", function () {
            $(this).animate({
                height: "100%",
                width: "100%",
                marginLeft: "0%",
                marginTop: "0%"
            }, 1000);
        });
    });

Upvotes: 1

Views: 85

Answers (2)

John Bergman
John Bergman

Reputation: 138

One solution to this is to dynamically bind and unbind the mouseover and mouseleave functions. To do this, simply start with mouseleave unbound and mouseover bound.

In the beginning of the body of mouseover, bind mouseleave and unbind mouseover.

In the beginning of the body of mouseleave, bind mouseover and unbind mouseleave.

This should solve the problem.

Upvotes: 0

Sam
Sam

Reputation: 4484

You have to stop the queuing up of animation. It should be done like this - 

$(document).ready(function () {
    $('.image img').on("mouseover", function () {
        $(this)
        .stop(true, false)
        .animate({
            height: "110%",
            width: "110%",
            marginLeft: "-5%",
            marginTop: "-5%"
        }, 1000);
    });

    $('.image img').on("mouseleave", function () {
        $(this)
        .stop(true, false)
        .animate({
            height: "100%",
            width: "100%",
            marginLeft: "0%",
            marginTop: "0%"
        }, 1000);
    });
});

The first parameter of .stop is clearQueue and second is jumpToEnd

Upvotes: 6

Related Questions