jQuery animate left 导致元素在 Fire Fox 中移动之前跳转答案

【问题标题】：jQuery animate left causes element to jump before moving in Fire FoxjQuery animate left 导致元素在 Fire Fox 中移动之前跳转
【发布时间】：2015-06-17 02:37:25
【问题描述】：

我正在尝试将一个 DIV 从屏幕左侧移出，并将另一个 DIV 从右侧移到屏幕上。但是第一个 DIV 会向右跳大约 100px，然后在使用 FF 时向左移动。

HTML

<div class="maincontent">
    Goodbye !
</div>  

<div class="maincontent-right">
    Welcome !
</div>

CSS

div.maincontent {
    width: 200px;
    height: 200px;
    background-color:blue;
    top: 20px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    left:0px;
    right:0;
}
div.maincontent-right {
    width: 200px;
    top: 20px;
    height: 200px;
    background-color:yellow;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    left: 1000px;
    right:0;
}

$(document).ready(function () {
    $('.maincontent').click(function () {
        $('.maincontent-right').stop().animate({
            left: 0
        }, 1000);
        $('.maincontent').stop().animate({
            left: -1000
        }, 1000);

    })
});

JSFIDDLE link here

这在 Chrome 和 IE 中运行良好，但在 FireFox 中，元素在开始移动之前会跳转......

如果对修复很重要，maincontent 和 maincontent-right 元素在主项目中包含 img 元素。

【问题讨论】：

标签： jquery html css

【解决方案1】：

问题是因为您同时为这两个元素设置了 Left 和 Right 值。

这是避免跳跃动画的更新代码。 Updated JSFiddle Link

基本上我所做的是添加了另一个 Div 包装器，其宽度为 200px，并与 Margin 居中对齐为 0px auto。这使包含的 Div 处于中心位置。

$(document).ready(function () {
    $('.maincontent').click(function () {
        $('.maincontent').stop().animate({
            left: -1000
        }, 1000);
        $('.maincontent-right').stop().animate({
            left: 0
        }, 1000);
    })
});

.mainbody {position:relative; width:200px; margin:0 auto; text-align:center;}
div.maincontent,div.maincontent-right {
    text-align:left;
    width: 200px;
    height: 200px;
    background-color:blue;
    top: 20px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    left:0px;
}
div.maincontent-right {
    background-color:yellow;
    left: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<body>
    <div class="mainbody">
        <div class="maincontent-right">Welcome !</div>
        <div class="maincontent">Goodbye !</div>
    </div>
</body>

希望对您有所帮助。

【讨论】：