Question

我正在尝试使用jQuery animate方法调整两个并排div的边距，从左右移动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。

jQuery animate方法无法在Chrome和IE中同时为两个div边距设置动画（在FF中工作）

1 个答案: