Question

我在网页上应用了fadeIn（）/ fadeOut（）函数，这些函数是在mouseenter / mouseleave上执行的，但是我注意到，如果我多次快速地将光标拖入或拖出，选定的块会在几秒钟后继续显示/消失。

我试图用Google搜索一些JQuery函数来修复它，但是我什么都没找到。

 $('.navbar').mouseenter(function () {
 $(".context-box__blur").fadeIn(200).css('display', 'inline-block');
 $("span").fadeIn(200).css('display', 'inline-block');
});
 $('.navbar').mouseleave(function () {
 $("span").fadeOut(200);
 $(".context-box__blur").fadeOut(200);
});

如何解决它，或者如何按时间限制函数的执行次数？

Answer 1

fadeIn()和fadeOut()具有complete功能，在fadeIn / fadeOut完成后运行，您可以在其他操作尚未完成之前禁用fadein或out：

var wait = false;

function fadeOut()
{
    if(wait) return false; // previous action not complete, cancel fadeOut
    wait = true;
    $("span").fadeOut(200, function(){ wait = false; })
}

function fadeIn()
{
    if(wait) return false; // previous action not complete, cancel fadeIn
    wait = true;
    $("span").fadeIn(200, function(){ wait = false; })
}

Answer 2

mouseenter()和mouseleave()的工作方式。尝试改用mouseover()和mouseout()。

$("p").mouseover(function(){
    $("p").css("background-color", "yellow");
  });

  $("p").mouseout(function(){
    $("p").css("background-color", "lightgray");
  });

https://jsfiddle.net/KyleMit/GR8sk/

此JSFiddle将为您提供有关这些鼠标事件如何工作的清晰思路。

我如何限制jQuery中fadeIn（）和fadeOut（）函数的执行次数？

2 个答案: