Question

我试图将一个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;
}

JS

$(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个元素。

Answer 1

问题在于您为这两个元素设置了Left和Right值。

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

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

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

希望这有助于。

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

1 个答案: