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

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

此致 Gados

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');
    });   
  });

.mouseleave（）和.mouseenter（）的问题

3 个答案: