鼠标悬停＆amp; hoverIntent

Question

我正在使用鼠标悬停来更改jQuery Supersized插件上的幻灯片编号，具体取决于您翻转的按钮。

但是，如果在滚动另一个按钮之前未完成下一张幻灯片的淡入淡出动画，则不会更改幻灯片。

有没有办法每隔几毫秒重新检查一下鼠标是否仍在按钮上并加载幻灯片（如果尚未加载）？

如果鼠标在一段时间内没有超过任何按钮，我还想加载不同的幻灯片。如何堆叠事件以便mouseout引用所有按钮并添加时间事件？

到目前为止我的代码（mouseout目前仅适用于最后一个按钮）：

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

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

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

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

提前致谢！

===================== UPDATE ===================== < /强>

非常感谢您的最新动态。不幸的是我无法让你的代码工作。但是，我想我可能已经找到了一个更简单的解决方案来修改原始代码并使用jQuery hoverIntent ...

我发现我可以禁用Supersized来阻止幻灯片在动画期间更改，我可以使用hoverIntent确保它在更改幻灯片之前等待足够的时间，以便动画不会叠加。

以下代码可以在鼠标悬停时完美地更改幻灯片。

但是我无法让mouseout工作，因为它为每个按钮创建了一个新实例，当鼠标从一个按钮滚动到另一个按钮时，它会叠加动画。此外，似乎只有鼠标停止的延迟计时器，而不是像鼠标悬停一样的间隔选项。

所以我只需稍微修改一下，以便：

如果鼠标没有超过任何按钮1000毫秒，那么api.goTo（1）;

我能想到的唯一方法是在浏览器窗口的整个大小上创建一个不可见的链接，并运行第二个hoverIntent函数来更改幻灯片，当它翻过来时，但我认为不会是最好的方法！

由于

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);
}

Answer 1

更新的答案（2011年10月9日）：
修订：

1. 第4行：var goToApiOne = false; //New: the "memory" of Api 1
2. Func mouseyover，第一行：goToApiOne = false; //Cancel any move to Api 1
3. Func mouseyout：见下文，整个功能已被替换

此代码背后的概念：

1. 鼠标悬停任何(goToApiOne = false)
2. 将任何goToApiOne = true + setTimeout鼠标移出，延迟时间为1000毫秒
3. 如果在经过1000毫秒之前悬停在另一张幻灯片上，那么请转到步骤1
4. setTimeout的函数调用：如果goToApiOne == true那么gotoApi(1);和goToApiOne = false（重置）。

---

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);
}

<小时/> 旧答案（2011年9月28日）：

我已经更改了您的代码，因此您可以轻松地将效果应用于多个按钮，而无需复制粘贴功能的内容。

阅读以下代码中的注释，并根据您的意愿调整代码。在淡入淡出函数范围内使用fadeFinished变量和按钮事件处理程序非常重要。

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);
}

另一个注意事项：我建议将.projectlink更改为#projectLink，因为该元素只应出现一次。

预期行为：


1. 鼠标悬停#projectlink2 ：转到幻灯片4 （第一次，没有延迟）
2. mouseout ：设置幻灯片1请求，延迟时间为500毫秒。
3. 鼠标悬停#projectlink1（500毫秒内）中止“幻灯片1请求”。发起幻灯片3
4. mouseout（动画完成前）设置幻灯片1请求，延迟时间为500毫秒
5. mouseover #projectlink3 ：之前（参见3）动画尚未完成。请求“幻灯片5”没有延迟
6. 幻灯片动画（3）已完成立即开始幻灯片5 。
7. mouseout 设置幻灯片1请求，延迟时间为500毫秒
8. 500毫秒已通过：启动幻灯片1
9. 等等。

新功能一次只能运行一张幻灯片。如果要查看多个（排队）幻灯片的代码，请参阅修订历史记录。