Animate two divs side by side with jQuery without pushing the other to the bottom

Question

So, I'm trying to make one DIV move from the screen to the left, and then pre-set the DIV (offscreen) to shift to the right. This works pretty much, except for one: It pushes the old DIV to the bottom when it comes to life.

But they need to stay close to each other, as if you were viewing pages.

You will understand when you check this: http://gasmar.home.xs4all.nl/flits/index.html First click “Agenda” and then “zakelijk”, you will notice that the DIV, which should be shifted to the left, It should be beautifully animated, like the incoming DIV, but it falls to the bottom of the new DIV .. after that the right position occurs, but this is simply not so.

Here is my code:

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

I tried to do this with relative coordinates, but they just keep pushing each other away, even when the z-position is different for each DIV, it doesn't work.

Perhaps I need to preload the DIV differently? but I don’t know in what other way ...

(In addition, as a continuation, I would like the DIV to remain at the level at which they end (not all streams, as it is now), although I have most of the parameters in%, so when you resize windows, and proportionally)

Answer 1

Try something like this, I have not updated the current code, but you can use it as an example:

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

Script:

 $(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 (made several other attempts and inserted the wrong version. Now the correct one is here).

Basically, the trick is very simple:

On the page superimposed on the previous one, enter the z-index: +1 style into it and, when the animation ends, change it with z-index: -1. This last feat can be achieved in callBack: (...). Animate ({....}, ..., function () {(...). Css ({'z-index': '- 1'})});

I played with the hope that I can achieve this without using the plugin you are using (jQuery-UI). This is what I got:

 <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> 

Example here: http://zequinha-bsb.int-domains.com/paginate.html