最后的Div在jQuery Hover Animation期間閃爍

Question

這是我的代碼： http ： //jsfiddle.net/ZspZT/

從示例中可以看出，第四個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});
        });

});