Странная неожиданная задержка перед анимацией mouseleave

Question

В настоящее время я пытаюсь создать небольшую анимацию, когда зависает a div using .animate() Функция jQuery.

Если вы посмотрите на фрагмент кода, вы увидите, что существует очень странная задержка между тем, как мышь выходила из div, а анимация запускается.

Это определенно что-то с функцией .animate(), потому что есть console.log, который отображается, когда мышь покидает div и без какой-либо странной задержки.

Я пропустил что-то или ... Любые идеи будут оценены!

Спасибо!

$(document).ready(function() { 
 
    $(".square").hover(function() { 
 
     var _this = this; 
 
     $(_this).find(".square-hover").eq(0).animate({ 
 
     top: "0px", 
 
     }, 750) 
 
    }) 
 
    $(".square").mouseleave(function() { 
 
     var _this = this; 
 
     console.log("mouseleave triggered"); 
 
     $(_this).find(".square-hover").eq(0).animate({ 
 
     top: "-300px", 
 
     }, 100) 
 
    }); 
 
})

.square { 
 
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); 
 
    padding: 0; 
 
    border: 1px solid rgba(255, 255, 255, 0.1); 
 
    height: 200px; 
 
    -webkit-transition-property: background-color; 
 
    -webkit-transition-duration: 0.2s; 
 
    overflow: hidden; 
 
    margin-top: 5px 
 
} 
 

 
.square-hover{ 
 
    position: absolute; 
 
    top: -300px; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(29, 233, 182, 0.85); 
 
}

<script src="http://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-xs-6 col-xs-offset-3 square"> 
 
    <div class="square-hover"></div> 
 
</div>

Answer 1

Проблема в том, что вы используете hover и mouseleave. Обработчик события hover на самом деле раздельный mouseenter и mouseleave обработчики - так что вы на самом деле прикрепляете 1 mouseenter и 2 mouseleave. Это является причиной вашей проблемы.

Если изменить код, чтобы передать две функции hover (первый для mouseenter, второй для mouseleave) Ваш код работает:

$(".square").hover(function() { 
    $(this).find(".square-hover").eq(0).stop(true).animate({ 
     top: "0px", 
    }, 750) 
}, function() { 
    $(this).find(".square-hover").eq(0).stop(true).animate({ 
     top: "-300px", 
    }, 100) 
}); 

Updated fiddle

отметить также использование stop(true) в вышеуказанном для предотвращения последовательных событий, засоряющих очередь анимации.