How do I make a mouseover stick until a page refresh?

Question

I want a mouseover event to be handled after a delay, and then be inactive until a page refresh.

This is my code thus far:

$(function() {
    $("#page-flip").mouseover(function() { 
        $(".box").toggleClass("box-change");
        $(".films").toggleClass("films-change");
        $(".synopsis").toggleClass("synopsis-change");
    });
});

How do I add a time delay to this and than have it inactive after being fully triggered once? Thank you :)

Answer 1

You can use .one() to have an event handler only trigger once:

$(function() {
    //bind a mouseover event handler that will fire only once
    $("#page-flip").one('mouseover', function() { 

        //set a timeout so the code runs after half a second
        setTimeout(function () {

            //run your code here
            $(".box").toggleClass("box-change");
            $(".films").toggleClass("films-change");
            $(".synopsis").toggleClass("synopsis-change");
        }, 500);
    });
});

Here is a demo: http://jsfiddle.net/jasper/fWakf/3/

Documentation: http://api.jquery.com/one

You could also use .off() :

$(function() {
    $("#page-flip").on('mouseover', function() { 

        //remove this event handler so it doesn't fire in the future
        $(this).off('mouseover');
        setTimeout(function () {
            $(".box").toggleClass("box-change");
            $(".films").toggleClass("films-change");
            $(".synopsis").toggleClass("synopsis-change");
        }, 500);
    });
});

Here is a demo: http://jsfiddle.net/jasper/fWakf/4/

Note that .on() is new in jQuery 1.7 and in this case is the same .bind() . .off() is also new so if you're using older than 1.7 and .bind() , then use .unbind() .

Answer 2

Edit This answer is worse than Jasper's . But the pattern it uses doesn't require jQuery, so I'm leaving it up.

---

Well, you could go simple and use a global variable, or complicated and remove the event entirely.

the simple one looks like this.

 var __GlobalEventFired = false;
 $(function() { 
 $("#page-flip").mouseover(function() {  
    if(!__GlobalEventFired)
    {
       __GlobalEventFired = true;
       $(".box").toggleClass("box-change"); 
       $(".films").toggleClass("films-change"); 
       $(".synopsis").toggleClass("synopsis-change"); 
    }
}); 
});