.mouseleave()和.mouseenter()

Question

我使用.mouseenter()和.mouseleave()来制作动画来解决button.The的问题，当我多次在按钮上移动光标时，它会不断重复动画的.For .mouseenter()，我希望它在游标一直盘旋到动画时间结束之前完成动画，如果在动画完成之前它离开了按钮，那么动画就应该停止，如果光标在动画完成之前悬停在它上面。

  $(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

您可以使用标志进入和离开。然后检查适当的标志，并在enter/ like事件发生时完成当前的动画，如下所示：

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

jsFiddle现场演示。

Answer 2

尝试添加.stop()，它将停止动画排队。

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

你好，加道斯

Answer 3

如果只希望它运行一次，则可以在事件触发后解除绑定：

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