jquery - 使用 jQuery 并排动画两个 DIV，而不会将另一个推到底部

Question

所以我试图让一个 DIV 从屏幕向左滑动，然后让一个预加载的 DIV(屏幕外)从右侧滑入。 这非常有效，除了一件事: 它在动画时将旧的 DIV 推到底部..

但他们需要紧挨着，就像翻页一样..

当你检查这个时你就会明白:http://gasmar.home.xs4all.nl/flits/index.html 首先点击“议程”，然后点击“zakelijk”，你会注意到应该向左推的 DIV 应该像传入的 DIV 一样很好地动画，但它被推到新的 DIV 的底部..之后是正确的位置，但那是不正确的。

这是我的代码:

//Preload DIV outside page:
$(document).ready(function() {

//preLoad 2 HTMLS:
preLoad("agendaPage", "agenda.html");
preLoad("zakelijkPage", "zakelijk.html");

//preLoad Function
function preLoad(page, file){
  $('#preloadDIV').after('<DIV id="'+ page+ '">'+page+'</DIV>');

    $('#'+ page +'').css(
    {
     //Load page DIV and hide it 1000px to the right
     'marginLeft' : "1000px",

    }).load(''+file+' #'+page+'DIV').hide();

  };
});



//Bind ClickEvent
$('#zakelijk').bind('click', function(){
    clickButton("zakelijk");
});

//Button function
function clickButton(name) 
{
    fadeCurrentPageLeft(name);
   //Load Page
    renderPage(name);
};

//Fade in new DIV
function renderPage(name)
{
   $('#' + name).unbind('click');
   $('#'+name+'Page')
   .attr("id", 'currentPage')
   .animate(
    {
      'marginLeft' : "-=1000px",
      'position' : "absolute",
    }, 
    {duration: 800, queue: false }, 'linear')
    .show();

    //Set ID to current Page
    $('#'+name+'Page');

};

//Fade out old DIV
function fadeCurrentPageLeft(name) 
{
   $('#currentPage')
   .animate(
{
   'marginLeft' : "-=1000px",
}, 
    {duration: 3000, queue: false }, 'linear')
   .hide("drop", {}, {duration: 3000, queue: false })
   .attr("id", name+'Page');
};

我试着用相对坐标来做，但它们总是互相推开，即使每个 DIV 的 z 位置不同，它也不起作用..

也许我应该以不同的方式预加载 DIV？但我不知道还有什么其他方式...

(另外，作为后续行动，我希望 DIV 保持它们最终的大小(不像现在那样全是 stretchty)，尽管我的大多数参数都在 % 中，所以当你调整窗口大小时它会保持很好和比例)

Answer 1

尝试这样的事情，我没有更新你当前的代码，但你可以用它作为例子:

http://jsfiddle.net/dtUz6/3/

HTML:

<a href="#">SLIDE!!!</a>
<div id="container">
    <div id="page1">

    </div>
    <div id="page2">

    </div>
</div>

CSS:

#container
{
     overflow: hidden;
     width: 400px; 
    position: relative;

}
#page1
{
     position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 400px;
    background: green;
}
#page2
{
     position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 600px;
    background: red;
    display: none;
}

脚本:

$(function(){
    $("#container").height($("#page1").height())
    $("a").click(function(){
        $("#page1").animate({left: -400}, 500); 
        $("#page2").show().css("left", 400).animate({left: 0}, 500); 
        $("#container").animate({ height : $("#page2").height()}, 500);
    });
});