jQuery悬停动画期间的最后一次潜水闪烁

Last Div Flickering During jQuery Hover Animation

本文关键字：最后一次 潜水 闪烁 悬停 动画 jQuery      更新时间：2023-09-26

下面是我的代码：http://jsfiddle.net/ZspZT/

正如您从示例中看到的，第四个div块的闪烁非常严重，特别是在悬停效果上，但偶尔也会与其他div一起闪烁。

提前感谢！

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/

尝试使用"mouseenter"answers"mouseleave"而不是"hover"。此外，您应该分配变量，而不是重复divs

    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});
        });
});
相关文章：