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能够保持他们最终的尺寸（不像现在这样都是strechty），虽然我有大多数参数％，所以当你调整窗口大小时它会保持不错和比例）

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

Answer 2

EDITED（做了一些其他的尝试，粘贴了错误的版本。现在正确的版本就在这里。）

基本上，诀窍很简单：

在覆盖前一个页面的页面上，输入它的样式，z-index：+ 1，当动画完成后，用z-index：-1将其改回。最后一个壮举可以在callBack中实现:( ...）。animate（{....}，...，function（）{（...）。css（{'z-index'：' - 1'}）}）;

我玩的希望能够在不使用您使用的插件（jQuery-UI）的情况下实现它。这就是我得到的：

<script type='text/javascript'>

    function paginate(from,to,url,styling) {
        loadPage(to,url,styling);
        $('#'+from).css( { 'top':'0px','left':'0px' } );
        $('#'+to).css( { 'top':'0px', 'left':'501px' } ).show();
        if ($('#'+from).height() > $('#'+to).height()) {
            var blankArea = $('#'+from).height() - $('#'+to).height();
            $('#'+to).css( { 'height':$('#'+to).height()+blankArea } );
            $("<div style='position:absolute; bottom:0; left:0; width:100%; height:"+blankArea+"px; background-color:white; ' ></div>").appendTo($('#'+to));
        }
        $('#'+to).animate( { 'zIndex':'+1','left':'0px' },3000, function () {
            $('#'+from).hide();
            $('#'+from).unbind('click');
            $('#'+from).remove();
            $('#'+to).css( { 'zIndex':'-1' } );

            // to exemplify a forever cicle:
            if (from == 'zekelijkPage')
                styling = 'float:left; position:absolute; top:0; left:0; background-color:green; width:500px; height:500px; display:none;'
            else styling = 'float:left; position:absolute; top:0; left:0; background-color:red; width:500px; height:650px; display:none;'
            $('#'+to).bind('click', function(){
                paginate(to,from,'',styling);
            });
        });
    }

    function loadPage(pageName,url,styling) {
        $('#wrapper').append("<div id='" + pageName + "' style='" + styling + " ' ></div>");
        if (url != '') {
            $.get(url, function(data) { //url returns escaped html
                $('#'+pageName).html(data);
            });
        } else $('#'+pageName).html('<p>blah blah blah</p><p></p><p>CLICK THIS PAGE</p><p></p><p></p><p>Page name: '+pageName+'</p>');
        // or
        //if (url != '') //load html into div
        //  $('#'+pageName).load(url);
    }

    $(document).ready(function() {
        //preLoad 2 HTMLS:
        //$('#agendaPage').load('agenda.html');
        //$('#zekelijkPage').load('zakelijk.html');
        loadPage('zekelijkPage','','float:left; position:absolute; top:0; left:0; background-color:green; width:500px; height:500px;');
        $('#zekelijkPage').bind('click', function(){
            paginate('zekelijkPage','agendaPage','','float:left; position:absolute; top:0; left:0; background-color:red; width:500px; height:650px; display:none;');
        });
    });

</script>



<body style='position:relative; width:100%; margin:20px auto; 
 background: transparent; ' >

   <div id='wrapper' style='position:relative; margin:0 auto; width:100%; ' >
   </div>
</body>

此处示例：http://zequinha-bsb.int-domains.com/paginate.html

使用jQuery并排运行两个DIV，而不将另一个推到底部

2 个答案: