Mouseover & hoverIntent

I'm using mouseover to change the slide number on the jQuery Supersized plugin depending on which button you rollover.

However, if the fade animation to the next slide hasn't completed before rolling over another button, it doesn't change the slide.

Is there a way to re-check every few milliseconds whether the mouse is still over the button and load the slide if it hasn't been loaded already?

Also I'd like to load a different slide if the mouse hasn't been over any of buttons for a certain amount of time. How can I stack up the events so the mouseout refers to all of the buttons and also add a time event?

My code so far (mouseout currently only applies to the last button):

$(".mybutton1").mouseover(function() {
api.goTo(2);
});

$(".mybutton2").mouseover(function() {
api.goTo(3);
});

$(".mybutton3").mouseover(function() {
api.goTo(4);

}).mouseout(function(){
api.goTo(1);
});

Thanks in advance!

.

=====================UPDATE=====================

Thanks very much for your latest update. Unfortunately I couldn't get your code to work. However, I think I may have found an simpler solution modifying your original code and using jQuery hoverIntent…

I found out I could disable Supersized from stopping the slides changing during the animation and I can use hoverIntent to ensure that it waits enough time before changing the slide so the animations don't stack up.

The following code works perfectly changing slides on mouseover.

But I can't get mouseout to work because it's creating a new instance of it for each button, and it stacks up the animations when the mouse rolls out of one button and onto the next. Also there only seems to be a delayed timer for the mouseout and not an interval option like the mouseover.

So I just need to modify this slightly so that:

If the mouse is not over ANY of the buttons for 1000 ms, then api.goTo(1);

The only way I can think of would be to create an invisible link the entire size of the browser window and run a second hoverIntent function to change the slide when it rolls over this, but I don't think that would be the best way!

Thanks

var buttonNumber = <?php echo $project_count; ?>; //Change this number to the number of buttons.
var prefix = "#project-link";
var prefix2 = "#project-bullet";

for(var i=0; i<buttonNumber; i++){

   (function(i){ //Anonymous function wrapper is needed to scope variable `i`
      var id = prefix+i;

      $(id).hoverIntent({
         interval: 350,
         over: mouseyover, 
         timeout: 1000,
          out: mouseyout
      });

      function mouseyover(){
         api.goTo(i+2);
         $(".project-bullet").fadeOut(1);
         $(prefix2+i).fadeIn(1000);
      }

      function mouseyout(){
         //api.goTo(1);
     开发者_运维技巧 }
   })(i);
}

Updated answer (9 oct 2011):
Revisions:

1. Line 4: var goToApiOne = false; //New: the "memory" of Api 1
2. Func mouseyover, first line: goToApiOne = false; //Cancel any move to Api 1
3. Func mouseyout: See below, the whole function has been replaced

The concept behind this code:

1. Mouseover anything (goToApiOne = false)
2. Mouseout anything goToApiOne = true + setTimeout with a delay of 1000ms
3. IF hovered over another slide before 1000ms have been passed THEN go to step 1
4. Function call by setTimeout: If goToApiOne == true THEN gotoApi(1); and
   goToApiOne = false (reset).

var buttonNumber = <?php echo $project_count; ?>; //Change this number to the number of buttons.
var prefix = "#project-link";
var prefix2 = "#project-bullet";
var goToApiOne = false; //New: the "memory" of Api 1

for(var i=0; i<buttonNumber; i++){

   (function(i){ //Anonymous function wrapper is needed to scope variable `i`
      var id = prefix+i;

      $(id).hoverIntent({
         interval: 350,
         over: mouseyover, 
         timeout: 1000,
          out: mouseyout
      });

      function mouseyover(){
         goToApiOne = false; //Cancel any move to Api 1
         api.goTo(i+2);
         $(".project-bullet").fadeOut(1);
         $(prefix2+i).fadeIn(1000);
      }

      function mouseyout(){
         goToApiOne = true; //Activate delay
         setTimeout(function(){
             if(goToApiOne){
                 goToApiOne = false; //Disable GoTo Api 1
                 api.goTo(1);
             }
         }, 1000);//Timeout of 1000ms
      }
   })(i);
}

var buttonNumber = 3; //Change this number to the number of buttons.

var poller = {interval:0, delay:0}; //timeout reference
var prefix = "#projectlink";
function pollerFunc(i, delay){
    //i = buttonNumber.
    //delay = number of intervals before activating a requested slide
    if(delay !== true){
        //Clean-up
        poller.clearInterval(poller.interval);
        poller.delay = delay || 0;

        //Set new interval. 50 milliseconds between each call
        poller.setInterval(function(){pollerFunc(i, true)}, 50);
    }
    else if(!vars.in_animation){
        //Check whether a delay has been requested. If yes, decrease the delay
        //  counter. If the counter is still higher than zero, return.
        if(poller.delay > 0 && --poller.delay > 0) return;

        window.clearInterval(poller.interval);
        var gotoNum = (i+2) % buttonNumber;
        // % = Modulo = Go back to x when the number = buttonNumber + x
        api.goTo(gotoNum);
    }
}
for(var i=0; i<buttonNumber; i++){
    (function(i){ //Anonymous function wrapper is needed to scope variable `i`
        var id = prefix+i;
        $(id).mouseover(function(){
            pollerFunc(i, 0); //No delay, if possible.
        })
        .mouseout(function(){
            pollerFunc(i, 10); //Delay 10 intervals (50x10 = 500 milliseconds
                               // before fading back to slide 1
        })
    })(i);
}