jQuery动画方法无法在Chrome和IE中同时为两个div边距动画（在FF中有效）

Question

I am trying to get a div to slide left and right moving in and out of visibility using the jQuery animate method to adjust the margins of two side by side divs.

In Firefox this works smoothly. In IE and Chrome it seems like one of the divs margins is animating but the other is failing to until the first div's animation is complete.

Here is a JSFiddle: http://jsfiddle.net/1uq99nxx/1/

Here is the jQuery code:

$( "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

I mostly just changed your css elements positioning and added a couple wrappers.

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

I put the right bar into a wrapper that's absolute positioned to the right of the container. I also put the email bar at the bottom in a wrapper that's also absolute positioned.

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

Your jQuery didn't change much. I just removed the references to the ACH box.

$( "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 });
});

You may need to adjust the css a bit to get your spacing exactly the way you want but this works across chrome, firefox and IE.