鼠标悬停和悬停意图

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

提前致谢！

.

======================更新=====================

非常感谢您的最新更新。不幸的是，我无法让您的代码正常工作。但是，我想我可能已经找到了一个更简单的解决方案，修改您的原始代码并使用 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. 函数mouseyover，第一行：goToApiOne = false; //Cancel any move to Api 1
3. funcmouseyout：见下图，整个函数都被替换了

这段代码背后的概念：

1. 鼠标悬停在任何东西上(goToApiOne = false)
2. 鼠标移出任何东西 goToApiOne = true + setTimeout 延迟 1000 毫秒
3. 如果在超过 1000 毫秒之前将鼠标悬停在另一张幻灯片上，则转到第 1 步
4. 由setTimeout 调用的函数：如果goToApiOne == true THEN 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 日）：

我已更改您的代码，以便您可以轻松地将效果应用于多个按钮，而无需复制粘贴函数的内容。

阅读下面代码中的 cmets，并根据您的意愿调整代码。将 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（在动画完成之前） 设置延迟为 500 毫秒的 幻灯片 1 请求
5. mouseover #projectlink3：之前的（见 3）动画还没有完成。立即请求“幻灯片 5”
6. 幻灯片动画 (3) 已完成立即开始 幻灯片 5。
7. mouseout 设置 slide 1 请求 延迟 500 毫秒
8. 500 毫秒过去了：启动幻灯片 1
9. 等等。

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