SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,963
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    .animate after .animate

    I have website with a header div, within the header I have a basic 1 level menu. I have used an .animate function in combination with easing to make the menu appear:

    CSS:
    Code:
    #header {
     width: 65%;
     max-width: 960px;
     height: 50px;
     line-height: 50px;
     margin: -50px auto 0;
     overflow: hidden; 
     position: relative;
     z-index: 1;
    }
    Javascript:
    Code:
    $("#header").animate({top: '+=70'}, 700, 'easeOutBounce');
    There is one page though where I have a seconde level submenu. What I try to acomplish is that when the main menu is in place the submenu is fading in and sliding down from its parent position.

    This is what I have to make this work:

    CSS:
    Code:
    #menu ul {
      margin:0 0 0 10px; 
      white-space:nowrap; 
      float:left;
      position: absolute;
    }
    Javascript:
    Code:
    $(document).ready(function() {
      $('#submenu').hide();
      $("#header").animate({top: '+=70'}, 700, 'easeOutBounce', function(){
        $('#submenu').fadeIn(400).animate({top: '+=40'}, 400);
      });
    });
    The function is working but instead that it is appearing from behind its parent (menu), it is coming from outside of the viewport, then you see it for a second and start indeed to fade in and animates dowwn to below the parent. On this page you can see what I mean. What should I do to make it appear from the parrent. Thank you in advance.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    Hi,

    Currently the second level of navigation fades in.
    Do you want to have it drop down instead?


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
  •