How to make a transform animation

Question

I have a script for my HTML page. I want to make the following in that script:

1. Show a preloading #id for some seconds and then fade out;

2. While the div is loading the main page under that div which is shown cause my opacity is to 0.7 I want to tranform the nav-bar up to browser windows so bassically hide it and in that position to tranform a new nav-bar .

I want that to take place while the preloading page is working not after! And I want to show more contects in parraler with the nav-bar animation.

I created the script but I get lost in how to position my actions and I don't know if I made anything corrdctly. I make the fade out preloader.

$(window).load(function(){
    $("#fade").css({opacity: 0.7})
    $("#fade").delay(4000).fadeOut(1000, function() {
        $('#nav-before').transition({ y: '40px' }); //now I want to hide the nav
        //and show the new with id="nav-after"
            //and in parraller with the above to be able to load more contects
        $("#fade").remove(); //when evrything finished kill the div
    });

});

Answer 1

$( "#fade" ).animate({
    opacity: 0.0
  }, 5000, function() {
    // Animation complete.
  });

You can play with animate . Here is the reference: jquery.com/animate/