Results 1 to 5 of 5

Thread: hide a div before animation with jquery

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

    Default hide a div before animation with jquery

    The code below animates divs site1 and site2 to the left and I need to "hide" div 3 until it's animation is ready then center it in the page by using
    Code:
    $('.site3').animate({left: $(".site3").width() / 2}, 1000);
    Code:
    $(".site1").click(function(){
        $(".site1").animate({'left': "-=2550"}, 1000, 'swing');
        $(".site2").animate({'left': "-=2550"}, 1000, 'swing');
    //div 3 will be hidden until it swings in from the left
        $('.site3').animate({left: $(".site3").width() / 2}, 1000);
    // redirect to external site after site3 animates in and shows a graphic
        $(".site1").after( "<meta http-equiv=\"refresh\" content=\"2;url=http://www.example.com\">" );
      });
    Any help is appreciated, thank you.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I don,t think you really want to "hide" it. If it were me, I would simply position it off screen, that way when you animate it onto the screen, it would appear to slide into place.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    You're right, I thought about it after I said that and it didn't sound right. I set a negative margin of -2500px on .site3 and am testing with this fiddle, but I can't quite get it to align right...

    http://jsfiddle.net/f2X2e/12/

    Site 1 and Site 2 are equal and centered in the middle of the page (basically links on a "splash" page). Site 3 should be off to the left out of the viewing area, then the jQuery animates it in to the center position.

    Code:
    $('.site3').animate({left: $(".site3").width() / 2 + 2500}, 1000);
    I added the +2500 to compensate for the negative css styling.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I wouldn't use margin. Since what you're animating is its left property (which assumes it's positioned relative, absolute, or fixed), I would initially 'hide' it (position it off screen) in the stylesheet or via inline style using its left property.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    Default

    I styled .site3 with "relative" position like the other divs and positioned it "off the screen" using margin-left with a negative value. I think the issue might be with floats. The linked JSFiddle above isn't updated, but do you think you might be able to check it out?

Similar Threads

  1. jQuery Multi Level CSS Menu animation problem
    By javascript_user in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-27-2012, 05:20 PM
  2. Replies: 2
    Last Post: 02-26-2012, 10:32 PM
  3. Repeat jQuery animation every 5 sec
    By bokanegro in forum JavaScript
    Replies: 2
    Last Post: 08-13-2010, 01:37 PM
  4. request: hide/show div with scroll animation
    By KaranSokhey in forum Looking for such a script or service
    Replies: 1
    Last Post: 08-11-2009, 01:09 PM
  5. Resolved Animation with JQuery Treeview script
    By moswell in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-12-2009, 07:19 PM

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
  •