仅在Safari中使用JQuery Animate Jumpy

Question

我正在一个页面上,我想要一个隐藏左侧导航栏.我只在Safari中遇到问题,Chrome,FF,Opera,IE7 +都没有问题.

当滑动动画即将在Safari中完成时,您会看到一些内容短暂跳转到其原始位置然后消失.我已经研究了一段时间没有太多运气.似乎大部分时间它是填充或边距,但它们设置为零,我尝试了两次CSS重置.在我看来,它与浮子有关.我试过玩Clear但没有运气.

这是一个演示

和相关的动画:

$('#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

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

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

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