javascript - .mouseleave() 和 .mouseenter() 问题

Question

我使用 .mouseenter() 和 .mouseleave() 为我的按钮制作动画。问题是，当我将光标多次移过按钮时，它会不断重复动画。对于 .mouseenter() 我想要它一旦光标一直悬停在它上面直到动画时间完成并且如果它在动画完成之前离开按钮动画应该停止。对于 .mouseleave() 如果光标在它之前悬停在它上面动画应该停止动画完成。

    
  $(document).ready(function(){
    $('#button').mouseenter(function(){
        $(this).animate({backgroundColor:'#ffce00',width:'+=1em'},100);
    });
    $('#button').mouseleave(function(){
        $(this).animate({backgroundColor:'#1e7989',width:'-=1em'},100);
    });   
  });

#button{
  width:100px;
  height:50px;
  background-color:red;
  }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="//cdn.jsdelivr.net/jquery.color-animation/1/mainfile"></script>
<div id="button"></div>

Answer 1

您可以使用标志来进入和离开。然后检查相应的标志，并在进入/离开事件发生时结束当前动画，如下所示:

$(document).ready(function () {
    var isEntering = false, // Create flags
        isLeaving = false;
    $('#button').mouseenter(function () {
        isEntering = true; // Set enter flag
        if (isLeaving) {   // Check, if leaving is on process
            $(this).finish(); // If leaving, finish it
            isLeaving = false; // Reset leaving flag
        }
        $(this).animate({
            backgroundColor: '#ffce00',
            width: '+=1em'
        }, 100);
    });
    $('#button').mouseleave(function () {
        isLeaving = true; // Set leave flag
        if (isEntering) { // Check if entering is on process
            $(this).finish(); // If it is, finish it
            isEntering = false; // Reset enter flag
        }
        $(this).animate({
            backgroundColor: '#1e7989',
            width: '-=1em'
        }, 100);
    });
});

A live demo at jsFiddle .