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/

好吧所以我有两个问题：

当在项目之间悬停时，它会在越过边距时自然触发mouseout功能，从而产生令人不快的浮华效果。我想做的只是为那些悬浮在其中并悬浮在其中的动画制作动画，以便其余部分保持不变。有什么想法吗？
尝试在所有元素周围快速移动鼠标，尽量不要进入癫痫发作。无论如何要防止这种情况？

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()淡出动画，让光标有一段时间移动到下一个块。以下是a fiddle，其中包括：

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

这有一些缺点，主要是因为.stop() does not cancel timeouts that were set by .delay()。我最好的解决方案是让你在＆＃34; flash-effect＆＃34;之间做出选择。从第一小提琴，或从第二小提琴延迟淡入效果。

Answer 2

您可以尝试使用stop方法传递2个参数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});
});

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

2 个答案: