2

编码

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

4

2 回答 2

2

这是一个工作小提琴。关键是.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()淡出动画，给光标一些时间移动到下一个块。这是一个小提琴，其中包括：

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

这有一些缺点，主要是因为.stop()不会取消由.delay(). 我最好的解决方案是让您在第一个小提琴的“闪光效果”或第二个小提琴的延迟淡入效果之间进行选择。

于 2012-01-25T17:29:41.770 回答
1

您可以尝试使用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});
});
于 2012-01-25T16:49:45.663 回答