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

时间:2012-02-01 14:07:26

标签: javascript jquery css

这是我的代码:http://jsfiddle.net/ZspZT/

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

提前致谢!

2 个答案:

答案 0 :(得分:5)

似乎.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/

答案 1 :(得分:1)

尝试使用'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});
        });

});