Question

我使用jQuery mousenter / 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函数仅在mousenter函数完成后才开始执行。

Answer 1

您有一堆4〜5个动画回调。
因此，我了解您为什么希望从事“触发预防”工作。

这是一种使用“标志”的方法。每种“禁用”状态都需要一个...如果鼠标位于徽标中或徽标之外，则要一直使用。

然后，使用超时和那些标志，可以阻止动画执行...如果在“移入”结束后将鼠标移出，请确保执行“移出”动画。

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

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

防止mouseleave功能中断mousenter

1 个答案: