在元素之间移动鼠标时，如何防止jquery.hover（）闪烁其他元素？

代码

function wkHover(){
$('.worksItem').hover(function() {
        $(this).animate({ top: '-10px' }, 300, 'swing', {queue: false});
        $('.worksItem').not(this).animate({ opacity: '0.5' }, 300, 'swing', {queue: false});            
    }, function(){
        $(this).animate({ top: '0' }, 200, 'swing', {queue: false});
        $('.worksItem').animate({ opacity: '1' }, 200, 'swing', {queue: false});
    });
}

好吧，我有两个问题：

当鼠标悬停在项目之间时，当鼠标悬停在边距上时，会自然触发鼠标出功能，从而产生这种令人不快的闪光效果。我想做的只是对悬停在外和悬停在内的对象设置动画，以便其他对象保持不变。有什么想法吗

尝试在所有元素周围快速移动鼠标，并尝试避免癫痫发作。为了防止这种情况

---

您可以尝试使用

stop

方法传递两个参数

stop（false，true）

，其中第一个参数是清除队列还是不清除队列，第二个跳转到当前动画的末尾。试试这个

$('.worksItem').hover(function() {
    $(this).stop(false, true)
    .animate({ top: '-10px' }, 300, 'swing', {queue: false});
    $('.worksItem').not(this).stop(false, true)
    .animate({ opacity: '0.5' }, 300, 'swing', {queue: false});            
}, function(){
    $(this).stop(false, true)
    .animate({ top: '0' }, 200, 'swing', {queue: false});
    $('.worksItem').not(this).stop(false, true)
    .animate({ opacity: '1' }, 200, 'swing', {queue: false});
});

这是一本书。在将新动画添加到队列之前，关键在于动画：

$(this).stop(true, true).animate(/***/);

但是,；这会导致问题，因为必须同时运行多个动画，因此调用

.stop（）

会干扰错误的动画。因此，不同的动画必须放在不同的动画中：

如果使用与默认队列不同的队列（

fx

），则必须手动执行这些操作

$(this).stop('jump', true, true).animate({/***/}, {
  queue: 'jump'
})
.dequeue('jump');

[编辑]对于第一个问题，我认为最好的解决方案是淡出动画，给光标一些时间移动到下一个块。以下是其中包括的：

$(this).stop('fade', true).delay(300, 'fade').animate({ //***

---

这有一些不利因素，主要是由于以下事实。我的最佳解决方案是让您在第一小提琴的“闪光效果”或第二小提琴的延迟淡入效果之间进行选择。

对于第二小提琴：使用jquery

dequeue

函数。见问题与类似的问题，我不知道如何称呼这些。你们能详细说明一下吗？@nacho是的，但没有成功：/@gdoron我做了一些挖掘，排队似乎是这里的方式。你能详细说明一下吗？给我一个工作的JSFIDLE，我会试着编辑它，我不能编辑你的网站…现在唯一剩下的问题是，当你把光标放在盒子底部10px时，它会像小女孩一样上下跳动。这可以通过引入一个不可见的hit-area-div覆盖来解决，但我不会为你这么做：）这在不同的浏览器中是不同的。谢谢，伙计。工作起来很有魅力。在chrome上也没有小女孩的问题。你觉得第一个问题怎么样？我一直在胡闹，找不到解决办法。也许是超时了？我不知道：/噢，我不能用我的小提琴重现第一个问题？啊，我重新解释了你的问题描述，我想我现在明白了，你只想在光标离开块和块之间的空间后，块淡出到1 alpha？

$(this).stop('fade', true).delay(300, 'fade').animate({ //***