Results 1 to 3 of 3

Thread: jQuery animate code needs to be expanded on

  1. #1
    Join Date
    Jul 2008
    Posts
    138
    Thanks
    13
    Thanked 1 Time in 1 Post

    Default jQuery animate code needs to be expanded on

    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!

  2. #2
    Join Date
    Jul 2008
    Posts
    138
    Thanks
    13
    Thanked 1 Time in 1 Post

    Default

    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/

  3. #3
    Join Date
    Jul 2008
    Posts
    138
    Thanks
    13
    Thanked 1 Time in 1 Post

    Default

    EDIT: this code works to do what I need with the animation

    Code:
    $(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!

Similar Threads

  1. Resolved Jquery Animate Width
    By Deadweight in forum JavaScript
    Replies: 1
    Last Post: 02-28-2014, 03:20 AM
  2. jquery .animate() function
    By creative creator in forum JavaScript
    Replies: 1
    Last Post: 11-29-2010, 08:51 AM
  3. Replies: 4
    Last Post: 05-30-2010, 02:30 PM
  4. Replies: 5
    Last Post: 02-12-2010, 03:01 PM
  5. contracted code starts expanded
    By mailtosaleh in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 03-24-2007, 02:06 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •