предотвращение прерывания работы мыши

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>

Everithing работает хорошо, когда я жду, пока не закончится функция mouseenter, прежде чем переместить курсор в другое место.Но если я переместлю курсор до того, как первая функция будет завершена, она будет прервана второй, что приведет к ошибкам.

Я хочу, чтобы моя функция mouseleave начала выполняться только после завершения функции mousenter, независимо от того, когда я перемещаюськурсор в другом месте.

Answer 1

У вас есть стек от 4 до 5 обратных вызовов для ваших анимаций.
Итак, я понимаю, почему вы хотите работать над "предотвращением триггеров".

Вот способ использования "флагов".Один для каждого «отключенного» состояния ... И один на всегда, если мышь находится в логотипе или нет.

Затем, используя таймауты и эти флаги, вы можете предотвратить выполнение анимации ... Во время выполненияОбязательно сделайте анимацию «out», если мышь не работает после того, как «in» закончена.

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

Отказ от ответственности: Это хороший стартер ... Это нужно проверить с помощью вашей анимации.;)