jquery - 使用 stop() 停止 jquery 滞后

Question

我知道我应该使用 $(selector).stop().animate(); 在某个地方，但我不确定当你离开时如何停止滞后，并且非常快地打开它，它会继续动画。这是我的代码，如果你能告诉我要设置什么（请记住我是 jquery 的初学者）。

$(document).ready(function(){

var order = $('#order').mouseenter(function(){
 $('#animateorder').animate({top: '+=5.5em'}, 'fast')
});

var order2 = $('#order').mouseleave(function(){

 $('#animateorder').animate({top: '-=5.5em'}, 'fast')
});

});
$(document).ready(function(){
 $('#contact').mouseenter(function(){
  $('#animatecontact').animate({top: '+=5.5em'}, 'fast')
 });
$('#contact').mouseleave(function(){
  $('#animatecontact').animate({top: '-=5.5em'}, 'fast')
 });
});

Answer 1

一种解决方案是使用计时器稍微延迟 mouseenter 操作，这样如果用户快速移入和移出鼠标，则不会发生任何事情。像这样的东西，虽然我可能没有涵盖所有的细节。但这应该让您对如何进行有所了解。

var timer = null;
$('#contact).mouseenter(function() {
    timer = setTimeout(function() {
        $('#animatecontact').animate({top: '+=5.5em'}, 'fast');
        timer = null;
    }, 250);  // Adjust to fit your needs best
});

$('#contact').mouseleave(function() {
    if(timer !== null) {
        clearTimeout(timer);
        timer = null;
    }

    $('#animatecontact').animate({top: '-=5.5em'}, 'fast');
});