JQuery Animate Jumpy 仅在 Safari 中

Question

我正在开发一个页面，我想要一个隐藏的左侧导航栏。我仅在 Safari 中遇到问题，在 Chrome、FF、Opera、IE7+ 中没有问题。

当 Safari 中的滑动动画即将完成时，您会看到一些内容短暂跳转到其原始位置，然后消失。我已经研究了一段时间但运气不佳。看起来大多数时候都是填充或边距，但它们被设置为零，并且我尝试了两次 CSS 重置。在我看来，这似乎与 float 有关。我尝试用 Clear 玩，但没有成功。

Here is a demo

以及相关动画:

$('#btnHide').click(function() {
    $("#divNavContent").animate({
        width: 'toggle'
    }, 1000, function() {
        $("#divNavHidden").animate({
            width: 'toggle'
        }, 500);
    });

});

$('#btnShowMenu').click(function() {
    $("#divNavHidden").animate({
        width: 'toggle'
    }, 500, function() {
        $("#divNavContent").animate({
            width: 'toggle'
        }, 1000);
    });
});  

Answer 1

出现此问题的原因是 #divLeft 上的 float: left; 但您可以从 #divLeft 中删除 float 并保持相同的 float 结构。

还要向 #content 添加 margin-left: 4px;，因为当您移除 float 时，两个 div 会被挤压。

看起来这更像是 Safari 中的一个错误，而不是你的错。