Animate Divs One Right After the Other with Jquery, Part 2

Im basically trying to load a page that has a set of widgets that are supposed to fade in animate one after the other when the nav button for that page is clicked and the page is loaded, and then fade out animate, before going to the next page, when another nav button is clicked.

The fade in animation is not smooth...the widgets dont fade in animate right after the other is finished animating the way Im pushing for... outside of the first 2 widgets, which do animate correctly. The rest however, start animating at the same time, just more slowly than the widget before it, based on my timing settings.

I also cant get the fadeout portion of the animation to play when I click to go to the next page.

Please keep in mind that the page with the widgets, is being loaded into a div on the parent page, so basically the widgets are on their own seperate html page (widgets.html) if you will.

How can I solve this issue?

My Navigation Links on the parent page:

<!--The dynamic load part loads the outside page into the div-->    
<ul id="Navbar">
       <li><a href="Page1.html" class="dynamicLoad">Page1</a></li>
       <li><a href="Page2.html" class="dynamicLoad">Page2</a></li>
       <li><a href="Page3.html" class="dynamicLoad">Page3</a></li>
       <li><a href="Page4.html" class="dynamicLoad">Page4</a></li>
    </ul>

The animation code on the widget page:

//Declare FadeIn Animation Rules
    <script>
    function animateIn(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            700,
            callback);
    }

    function animateIn1(divId, callback) {
        $(divId).animate(
            {opacity:1.0},
            1400,
            callback);
    }

    function animateIn2(divId, callback) {
        $(divId).animate(
           开发者_C百科 {opacity:1.0},
            2100,
            callback);
    }



    //Declare FadeOut Animation Rules

    function animateOut(divId, callback) {
        $(divId).animate(
            {opacity:0},
            700,
            callback);
    }

    function animateOut1(divId, callback) {
        $(divId).animate(
            {opacity:0},
            1400,
            callback);
    }

    function animateOut2(divId, callback) {
        $(divId).animate(
            {opacity:0},
            2100,
            callback);
    }





    //Start FadeIn Animation

    $("#MyWidget").animate(
        {opacity:1.0}, 300, 
        function() {
            animateIn1("#MyWidget1");
            animateIn2("#MyWidget2");
            animateIn3("#MyWidget3");
            animateIn4("#MyWidget4");
        }
    );


    //Start FadeOut Animation

    $("#next-page").click(function($event) {
        $event.preventDefault();
        var href = $(this).attr("href");

        animateOut4("#MyWidget4");
        animateOut3("#MyWidget3");
        animateOut2("#MyWidget2");
        animateOut1("#MyWidget1", function() {
           animateOut("#MyWidget");
       });
    });


    </script>

I would suggest chaining the fades with callbacks instead of time offsets, perhaps something like this: http://jsfiddle.net/p8gj8/6/

Use the ready() function:

$(document).ready(function() {
  // your functions
});

That way the animations will not run while the page loads.

Alternatively you could try:

$(window).load(function() {
      // your functions
});