鼠标悬停并悬停意图

Question

我使用鼠标悬停来更改 jQuery Supersized 插件上的幻灯片编号，具体取决于您滑过哪个按钮。

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

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

另外，如果鼠标在一定时间内没有悬停在任何按钮上，我想加载不同的幻灯片。如何堆叠事件，以便鼠标移出引用所有按钮并添加时间事件？

到目前为止我的代码（鼠标悬停当前仅适用于最后一个按钮）：

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

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

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

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

提前致谢！

。

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

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

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

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

但我无法让 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; //新增：Api 1的“内存”
2. Func mouseyover，第一行：goToApiOne = false; //取消对 Api 1 的任何移动
3. Func mouseyout：见下文，整个函数已被替换

此代码背后的概念：

1. 鼠标悬停在任何内容上(goToApiOne = false)
2. 鼠标移出任何内容 goToApiOne = true + setTimeout 并延迟 1000 毫秒
3. 如果在 1000 毫秒过去之前将鼠标悬停在另一张幻灯片上，则转到步骤1
4. 通过 setTimeout 调用函数：If goToApiOne == true THEN gotoApi(1); and
   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);
}

---

Old answer (28 sept 2011):

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

阅读下面代码中的注释，并根据您的意愿调整代码。在淡入淡出函数和按钮事件处理程序的范围内包含 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. < em>mouseout：设置延迟 500 毫秒的幻灯片 1 请求。
3. 将鼠标悬停在 #projectlink1 上（500 毫秒内） 中止“幻灯片 1 请求”。启动幻灯片 3
4. 鼠标悬停（在动画完成之前）设置延迟 500 毫秒的幻灯片 1 请求
5. 鼠标悬停# projectlink3：前面的（参见3）动画尚未完成。立即请求“幻灯片 5”
6. 幻灯片动画 (3) 已完成 立即开始幻灯片 5。
7. mouseout 设置延迟 500 毫秒的幻灯片 1 请求
8. 已过去 500 毫秒：启动幻灯片 1
9. 等等。

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