Question

Here is my code:

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

    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
});
});

It works well, but the mouseover is a bit fidgety. I’d like it to have it stick for a longer period of time, and to not flinch as much when it first triggers. For instance if the user is moving his/her mouse quickly it should either fully release or not at all, instead of half-stepping. Any ideas?

I think a a timeout is the way to go, but I’ve tried this and now the classes won’t toggle.

function myMouseOver() 
{

    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");

}

$("#page-flip").mouseover(function() { 
          var t = setTimeout("myMouseOver()",1500);
});

Answer 1

to delay javascript execution you can use setTimeout or setInterval

try this:

function myMouseOver()
{
    $(".box").toggleClass("box-change");
    $(".films").toggleClass("films-change");
    $(".synopsis").toggleClass("synopsis-change");
}


$("#page-flip").mouseover(function() { 
  var t = setTimeout("myMouseOver()",1500);
});

I’ve made a jsFiddle for you, tell me if this is what you had in mind :
http://jsfiddle.net/alexpeta/fWakf/5/