Javascript 如何制作变换动画

我有一个HTML页面的脚本。我想在该脚本中制作以下内容：

显示预加载

#id

几秒钟，然后淡出

当div加载显示的div下的主页时，因为我的

不透明度
为
0.7
我想将
导航条
转换到浏览器窗口，以便基本隐藏它，并在该位置转换新的
导航条

我希望在预加载页面工作时发生，而不是之后！ 我想用

nav bar

动画在parraler中显示更多内容

我创建了脚本，但我迷失在如何定位我的动作，我不知道我是否做了正确的事情。我做了淡出预加载

$(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
    });

});

---

您可以使用播放动画。以下是参考资料：

create fiddle以便很容易识别问题。@SureshPonnukalai我将Bootstrapt与costum HTML和CSS样式结合使用。我真的想做这件事，但这需要一些时间，现在我正处于项目的中间（现在几天），现在对我来说时间就是黄金。

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