マウスリーブアニメーションの前に奇妙な予期しない遅延が発生しました

Question

現在、アニメーションを作成しようとしています。.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を装着しています。これがあなたの問題の原因です。あなたは（mouseleaveための第二、mouseenterのための最初の）hoverに二つの機能を渡すようにコードを変更した場合

あなたのコードは動作します：

$(".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)の使用を注意してください連続したイベントがアニメーションキューを詰まらせないようにします。