Question

从示例中可以看出，第四个div块的闪烁非常糟糕，特别是在悬停效果上，但偶尔也会与其他div一起闪烁。

提前致谢！

Answer 1

似乎.animate中内置的缓动功能导致您的百分比宽度加起来超过100％，导致最后一个子DIV消失。有几种方法可以解决这个问题。

当我用固定的数字宽度替换百分比宽度时，问题就会消失。我在下面的代码中使用了这个（并且你的代码有很多冗余要减少）：

$('document').ready(function() {
    var speed = 450;
    $('.four-ways-slide').hover(function() {
        $(this).stop().animate({
            width: 425
        }, speed).siblings().stop().animate({
            width: 25
        }, speed);
    }, function() {
        $(this).siblings().andSelf().stop().animate({
            width: 125
        }, speed);
    });
});

http://jsfiddle.net/mblase75/ZspZT/10/

另一种可能性是使用百分比宽度加上99％而不是100％，并在容器DIV上设置背景颜色以隐藏间隙。在.animate方法中添加线性缓动有助于保持总宽度不超过100％：

$('document').ready(function() {
    var speed = 450;
    $('.four-ways-slide').hover(function() {
        $(this).stop().animate({
            width: '75%'
        }, speed, 'linear').siblings().stop().animate({
            width: '8%'
        }, speed, 'linear');
    }, function() {
        $(this).siblings().andSelf().stop().animate({
            width: '24.5%'
        }, speed, 'linear');
    });
});

#four-ways-slide-4,#four-ways-slider{background:#999999;}

http://jsfiddle.net/mblase75/ZspZT/9/

Answer 2

尝试使用'mouseenter'和'mouseleave'而不是'hover'。你也应该分配变量而不是重复div

    var one = $('#four-ways-slide-1');
var two = $('#four-ways-slide-2');
var three = $('#four-ways-slide-3');
var four = $('#four-ways-slide-4');
var all = $('.four-ways-slide');

thisIn = function(){
    all.animate({width:'8%'},{duration: 450,queue:false});
};

thisOut = function(){
    all.animate({width:'25%'},{duration: 450,queue:false});       
};

one.mouseenter(function(){
    thisIn();
    $(this).animate({width:'76%'},{duration: 450,queue:false});

        one.mouseleave(function(){
            thisOut();
            $(this).animate({width:'25%'},{duration: 450,queue:false});
        });

});

最后的Div在jQuery Hover Animation期间闪烁

2 个答案: