javascript - jQuery animate 方法无法在 Chrome 和 IE 中同时为两个 div 边距设置动画(在 FF 中有效)

Question

我正在尝试让一个 div 左右滑动，使用 jQuery 动画方法调整两个并排 div 的边距。

在 Firefox 中这很顺利。在 IE 和 Chrome 中，似乎其中一个 div 边距正在设置动画，但另一个在第一个 div 的动画完成之前无法设置。

这是一个 JSFiddle:http://jsfiddle.net/1uq99nxx/1/

这是 jQuery 代码:

$( "div#PrevButton" ).click(function() {
    $( "div#ACHPanel" ).animate({
        marginLeft: '-=730px'
    }, { duration: 1000, queue: false });
    $( "div#SummaryPanel" ).animate({
        marginLeft: '+=730px'
    }, { duration: 1000, queue: false });
});

$( "div#NextButton" ).click(function() {
    $( "div#ACHPanel" ).animate({
        marginLeft: '+=730px'
    }, { duration: 1000, queue: false });
    $( "div#SummaryPanel" ).animate({
        marginLeft: '-=730px'
    }, { duration: 1000, queue: false });
});    

Answer 1

我主要只是更改了您的 css 元素定位并添加了几个包装器。

http://jsfiddle.net/1uq99nxx/3/

我将右边的栏放入包装器中，该包装器绝对定位在容器的右侧。我还将电子邮件栏放在底部的包装器中，该包装器也是绝对定位的。

CSS:

div#ACHPanel {
    float: left;
    height: 360px;
    width: 230px;
    padding: 0px 10px 10px 10px;
}

div#ACHPanelWrapper {
    width: 256px;
    padding: 0; 
    background-color: #A6B0D2;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
}

div#emailWrapper {
    margin: 0 10px 0 0;
    position: absolute;
    top: 410px;
    right: 0;
}

您的 jQuery 没有太大变化。我刚刚删除了对 ACH 框的引用。

$( "div#PrevButton" ).click(function() {
    $( "div#SummaryPanel" ).animate({
        marginLeft: '+=730px'
    }, { duration: 1000, queue: false });
});

$( "div#NextButton" ).click(function() {
    $( "div#SummaryPanel" ).animate({
        marginLeft: '-=730px'
    }, { duration: 1000, queue: false });
});

您可能需要稍微调整一下 css 以获得您想要的间距，但这适用于 chrome、firefox 和 IE。