Javascript 右键动画jquery

我有四个带图片的块，我需要给它们设置动画：当你把鼠标放在块上时，它会下降； 当你把它拿走的时候，它会上升。现在我的问题是我移动鼠标的速度非常快，块开始排队等待我的动作，过了一些时候，它们好像没有我就移动了

JS代码：

$('.blocks').hover( up, down );
    function up() {
            $(this)
            .animate ({
                top: '+=400px'}, 1000);
    }

function down() {
    $(this).delay(300)
        .animate ({
            top: '-=400px'}, 800);
}
`

用这个

$('.blocks').hover( up, down );

function up() {
        $(this).stop().animate({
            top: '+=400px'
        }, 1000);
}

function down() {
        $(this).stop().delay(300).animate({
            top: '-=400px'
        }, 800);
}

---

在对新动画排队之前，需要停止动画以避免此问题。您可以在以下网址找到更多详细信息：

在使用jQuery的.animate（）函数时，它通常由鼠标指针或悬停事件触发。这一切都很好，但这意味着我们需要考虑那些被多次触发的事件

解决方案： 使用jQuery stop（）函数

例如：

$('.blocks').hover( up, down );

function up() {
    $(this).stop().animate ({ top: '+=400px' }, 1000);
}

function down() {
    $(this).stop().delay(300).animate ({ top: '-=400px'}, 800);
}

Chris Coyier写了一篇关于如何处理这个问题的好文章

---

感谢您提供的有用链接，但我仍然不知道如何使用“jQuery stop（）函数”使块向右移动，因为当您停止动画时，块开始表现出奇怪的行为，例如，不仅在400px上下移动，在800px上下移动两次。不完全清楚您的意思，如果你用你的例子做一个JSFIDLE，我会帮你看一看@用户2950593