PDA

View Full Version : jQuery animate code needs to be expanded on



?foru
06-17-2014, 03:15 PM
I have the following fiddle here: http://jsfiddle.net/LTu92/48/

This will be the "splash" page, and if you click on the sqaures it will take you to that related site. When the divs animate off the page, I would like to bring that content back in from that same side and display it in the center of the website maybe in a div named main_stage or something similar. ie. the left square slides off the page to the left, and I would like that URL page content to slide back in from the left.

The goal is to combine multiple URL websites into the same content area and be as seamless as possible. I looked into ajax and content loading into a div, but most require allow_url_include and if set to a variable it could be exploited.

The 2 separate sites will be displayed in the center of the screen so they can utilize the same div as the content animates in from the left or right side.

Thank you for any help!

?foru
06-18-2014, 02:31 PM
The project changed direction, but below is what I have so far and what I need help with.

I'm having trouble with getting the 2 boxes to animate off the same side of the screen at the same time. I also need some advice on how to hide divs 3 and 4 until they animate to the center of the screen. (code is in the fiddle but commented out)

I have the following code - and a link to a fiddle below.


$(document).ready(function(){
$('.site1, .site2').click(function(){
if ($(this).is('.site1')) {
//take site 1 off screen
$(this).animate({'left': "-=2550"}, 1000, 'swing', function(){
//take site 2 off screen in same direction (need it to move exactly side by side with above animation
$('.site2').animate({left: "-=2500"}, 1000, 'swing');
//site 1 screenshot on screen center before redirecting
//will be div site3 because of different content but I need to know how to hide div3 on the left so it can animate in to center and display the content I need
$('.site1').animate({left: $(".site1").width() / 2}, 1000);

$(".site1").after( "<meta http-equiv=\"refresh\" content=\"1;url=http://www.example.com\">" );
});
} else { // take site 2 off screen
$(this).animate({'right': '-=2550px'}, 1000, 'swing', function(){
//take site 1 off screen in same direction (need it to move exactly side by side with above animation
$('.site1').animate({right: "-=2500"}, 1000, 'swing');
//site 2 screenshot on screen center before redirecting
//will be div site4 because of different content but I need to know how to hide div3 on the left so it can animate in to center and display the content I need
$(".site2").animate({right: $(".site2").width() / 2}, 1000);
$(".site2").after( "<meta http-equiv=\"refresh\" content=\"1;url=http://www.example.com\">" );
});
}
});


Here is what I have so far in a fiddle: http://jsfiddle.net/LTu92/175/

?foru
06-18-2014, 03:28 PM
EDIT: this code works to do what I need with the animation


$(document).ready(function()
{
$(".site1").click(function(){
$(".site1").animate({'left': "-=2550"}, 1000, 'swing');
$(".site2").animate({'left': "-=2550"}, 1000, 'swing');
//this should be div 3 which will be hidden until it swings in from the left
$('.site3').animate({left: $(".site1").width() / 2}, 1000);
$(".site1").after( "<meta http-equiv=\"refresh\" content=\"2;url=http://www.example.com\">" );
});
$(".site2").click(function(){
$(".site2").animate({'right': "-=2550"}, 1000, 'swing');
$(".site1").animate({'right': "-=2550"}, 1000, 'swing');
//this should be div 4 which will be hidden until it swings in from the left
$('.site4').animate({right: $(".site1").width() / 2}, 1000);
$(".site1").after( "<meta http-equiv=\"refresh\" content=\"2;url=http://www.example.com\">" );
});
});

Now, I just need advice on how to hide the divs site3 (on left and site4 on right out of site until they are ready for animation.

Thank you!