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

Posted 2023-05-08

【中文标题】使用 jQuery 并排动画两个 DIV，而不将另一个推到底部

【英文标题】：Animate two DIV's side by side with jQuery, without pushing the other to the bottom

【发布时间】：2012-01-02 03:22:24

【问题描述】：

所以我试图让一个 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 保持它们最终的大小（并非像现在一样全有弹性），尽管我有大多数参数，所以当你调整窗口大小时它会保持良好状态和比例）

【参考方案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);
    );
);

【讨论】：

谢谢，马上测试一下，是不是“溢出：隐藏”修复了？还是.show？

是绝对位置，不知道你浮动的DIV是不是你想移动的，如果你这样做，页面宽度的内容不是你不想显示的页面的2倍，如果它不适合，它将被放置在另一个元素的下方。使用绝对位置，您可以将其移动到页面外和彼此之间。

【参考方案2】：

已编辑（已进行了一些其他尝试并粘贴了错误的版本。现在正确的版本在这里）。

基本上，诀窍很简单：

在覆盖前一个的页面上，输入它的样式，z-index:+1，当动画完成后，用z-index:-1将它改回来。这最后一项壮举可以在回调中实现： (...).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