时间戳

首页 > 解决方案 > 防止mouseleave函数中断mouseenter

javascript - 防止mouseleave函数中断mouseenter

问题描述

我使用 jQuery mouseenter/mousleave 来执行带有我的徽标的功能。我也使用 Animate.css。

$(".logo-1").mouseenter(function() {
        $(this).css("display", "none");
        $(".logo-2").css("display", "inline-block");
        $("#facebook").css("visibility", "visible").css("-webkit-animation-duration", "0.1s").addClass("animated fadeInDown").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
        function() {
          $("#linked").css("visibility", "visible").css("-webkit-animation-duration", "0.1s").addClass("animated fadeInDown").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
          function() {
            $("#instagram").css("visibility", "visible").css("-webkit-animation-duration", "0.1s").addClass("animated fadeInDown").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
            function() {
              $("#github").css("visibility", "visible").css("-webkit-animation-duration", "0.1s").addClass("animated fadeInDown").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
              function() {
                $("#facebook, #linked, #instagram, #github").removeClass("animated fadeInDown")
              });
                    });
                  });
                });
              });

$(".logo-social").mouseleave(function() {
        $("#github").addClass("animated fadeOutUp").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
          function() {
            $("#instagram").addClass("animated fadeOutUp").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
              function() {
                $("#linked").addClass("animated fadeOutUp").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
                  function() {
                    $("#facebook").addClass("animated fadeOutUp").one("animationend oAnimationEnd mozAnimationEnd webkitAnimationEnd",
                      function() {
                        $("#facebook, #linked, #instagram, #github").removeClass("animated fadeOutUp").css("visibility", "hidden");
                        $(".logo-2").css("display", "none");
                        $(".logo-1").css("display", "inline-block");
                      });
                  });
                });
            });
          });

HTML：

        <div class="logo-social">
          <div class="dg">
            <img src="img/logo-1.png" class="logo-1" alt="logo">
            <img src="img/logo-2.png" class="logo-2" alt="logo">
          </div>
          <div class="wrapper">
           <div class="media-links-1">
            <a href="https://www.facebook.com/gorniczy" target="_blank"><img src="img/facebook-logo-dark.png" id="facebook" alt="Facebook logo"></a>
            <a href="https://www.linkedin.com/in/denis-gornichar-56b3b564/" target="_blank"><img src="img/linkedin-sign-dark.png" id="linked" alt="LinkedIn logo"></a>
            <a href="https://www.instagram.com/gorniczy/" target="_blank"><img src="img/instagram-symbol-dark.png" id="instagram" alt="Instagram logo"></a>
            <a href="https://github.com/gorniczy" target="_blank"><img src="img/github-sign-dark.png" id="github" alt="Github logo"></a>
           </div>
         </div>
        </div>

当我等到 mouseenter 函数完成后再将光标移动到其他地方时，一切都很好。但是如果我在第一个函数完成之前移动光标，它会被第二个函数打断，从而导致错误。

我希望我的 mouseleave 函数只有在 mouseenter 函数完成后才开始执行，无论我何时将光标移动到其他地方。

标签： javascriptjqueryasynchronous

解决方案

您的动画有 4~5 个回调堆栈。
所以我理解你为什么要研究“触发预防”。

这是一种使用“标志”的方法。每个“禁用”状态一个......如果鼠标进入或退出徽标，则一个总是现在。

然后，使用超时和那些标志，您可以阻止动画执行......同时确保在“in”结束后鼠标不在时执行“out”动画。

var disableIn = false,
    disableOut = false,
    animationDelayIn = 600,     // Set those two delays based on your animation times
    animationDelayOutIn = 600,
    currentlyIn = false;

$(".logo").mouseenter(function(){

  currentlyIn = true;

  if(!disableIn){
    //otherAnimation
  }

  // Toggle the flag during the animation
  disableIn = true;
  setTimeout(function(){
    disableIn = false;
  },animationDelayIn);
});

$(".logo").mouseleave(function(){

  currentlyIn = false;

  if(!disableOut){
    //otherAnimation
  }

  // Toggle the flag during the animation
  disableOut = true;
  setTimeout(function(){
    disableOut = false;
    if(!currentlyIn){
      $(".logo").trigger("mouseleave");  // If the mouse is out, yeah, do the out animation now.
    }
  },animationDelayOut);
});

免责声明：这是一个很好的开始......它需要用你的动画进行测试。;)

推荐阅读