jquery - 在悬停时停止描述的 jQuery 函数并在 mouseleave 上重新启动它

Question

我有一个 jQuery 函数func1，可以在文档就绪时正常工作：

$(document).ready(function ()
{
   //func1 description is here
   ...
   $(func1);
}

我也有

$(function ()
{
            $("#my-ul a").hover(function ()
            {
               //do something on my-ul a hover
            });
            $("#my-ul a").mouseleave(function ()
            {
               //do something on my-ul a mouseleave
            });
});

它工作正常。

我也想要停止func1并my-ul a hover重新启动它my-ul a mouseleave（就像你根本没有悬停一样）。

浏览stackoverflow并没有帮助我找到答案。我相信应该使用 .stop() 函数，但我没有运气在我的例子中正确使用它。

谢谢你。

更新：这是一个jsFiddle 示例，我想在将鼠标悬停在链接上时停止更改文本并开始以相同的方式更改 onmouseleave 回来。

Answer 1

您无法取消delay，您需要使用setTimeoutorserInterval代替。

代码（演示）：

$(document).ready(function () {
    var terms = ["span_aaa", "span_bbb", "span_ccc", "span_ddd", "span_eee", "span_fff"],
        i = 0,
        intervalId = null;

    function rotateTerm() {
        $("#text-content").fadeOut(200, function () {
            $(this).text($('#text-slider .' + terms[i]).html() + i).fadeIn(200);
        });
        $("#title-content").fadeOut(200, function () {
            $(this).text($('#title-slider .' + terms[i]).html() + i).fadeIn(200);
            i == terms.length - 1 ? i = 0 : i++;
        });
    }
    rotateTerm();
    intervalId = setInterval(rotateTerm, 2000);
    $('#stop-on-hover').hover(function () {
        if (intervalId) {
            clearInterval(intervalId);
        }
    }, function () {
        intervalId = setInterval(rotateTerm, 2000);
    });
});​

Answer 2

我可以提出两个选择：

1. 使用 JavascriptsetTimeout而不是delay因为您可以停止前者。这是一个如何发挥作用的例子。见演示。

   var thread = null;
   
   function rotateTerm() {
       var ct = $("#text-content").data("term") || 0;
   
       function fadeIn() {
           $("#text-content").data("term", ct == terms.length - 1 ? 0 : ct + 1).text($('#text-slider .' + terms[ct]).html() + ct).fadeIn();
           $("#title-content").text($('#title-slider .' + terms[ct]).html() + ct).fadeIn();
       }
   
       function fadeOut(callback) {
           $("#text-content").fadeOut(200);
           $("#title-content").fadeOut(200, callback);
       }
   
       fadeIn();
       thread = window.setTimeout(function() {
           fadeOut(rotateTerm);
       }, 2000);
   }
   
   rotateTerm();
   $("a#stop-on-hover").hover(function() {
       thread && window.clearTimeout(thread);
   }, function() {
       rotateTerm();
   });
   

2. 设置一个标志，告诉您的代码是继续动画还是停止动画，您可以在悬停和悬停时更改它。这是一个例子。见演示。有一些闪烁，但您可以使用代码使其正常工作。

   var animate = true;
   
   function rotateTerm() {
       var ct = $("#text-content").data("term") || 0;
   
       function fadeIn() {
           $("#text-content").data("term", ct == terms.length - 1 ? 0 : ct + 1).text($('#text-slider .' + terms[ct]).html() + ct).fadeIn();
           $("#title-content").text($('#title-slider .' + terms[ct]).html() + ct).fadeIn();
       }
   
       function fadeOut(callback) {
           $("#text-content").fadeOut(200);
           $("#title-content").fadeOut(200, callback);
       }
   
       fadeIn();
   
       window.setTimeout(function() {
           if (animate) {
               fadeOut(rotateTerm);
           }
       }, 2000);
   }
   
   rotateTerm();
   $("a#stop-on-hover").hover(function() {
       animate = false;
   }, function() {
       animate = true;
       rotateTerm();
   });