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

Question

代码

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

http://egegorgulu.com/works

http://jsfiddle.net/vJQEQ/17/

好吧，我有两个问题:

1. 当鼠标悬停在项目之间时，当越过边缘时，它自然会触发 mouseout 功能，从而产生这种令人不快的浮华效果。我想做的只是对悬停在外面和悬停在其中的动画进行动画处理，以便其余部分保持不变。有什么想法吗？

2. 尝试在所有元素周围快速移动鼠标，并尽量不要陷入癫痫发作。无论如何要防止这种情况发生？

Answer 1

这是一个working fiddle 。关键是.stop()将新动画添加到队列之前的动画:

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

但是；这会导致问题，因为必须同时运行多个动画，因此调用 .stop() 会干扰错误的动画。因此不同的动画必须放在不同的动画中 queues :

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

如果您使用与默认队列 (fx) 不同的队列，则必须.dequeue()手动进行。

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

[编辑]对于第一个问题，我认为最好的解决方案是 .delay()淡出动画，让光标有时间移动到下一个 block 。这是a fiddle其中包括:

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

这有一些缺点，主要是由于 .stop() does not cancel timeouts that were set by .delay() 。我最好的解决方案是让您在第一个 fiddle 的“闪光效果”或第二个 fiddle 的延迟淡入效果之间进行选择。