предотвратить функцию mouseleave от прерывания mousenter

56
8

Я использую 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, независимо от того, когда я перемещаю курсор в другом месте.

спросил(а) 2018-10-14T01:59:00+03:00 1 год, 8 месяцев назад
1
Решение
85

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

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

Затем, используя тайм-ауты и эти флаги, вы можете предотвратить выполнение анимации... Удостоверившись, что вы делаете "вне" анимацию, если мышь отсутствует после окончания "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);
});

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

ответил(а) 2018-10-14T02:28:00+03:00 1 год, 8 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема