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.
Code:
$(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/
Bookmarks