jQuery - slideDown slideUp - fadeIn fadeOut - ScrollTo

Question

我想尝试达到这个效果。

所以我有一个100％身高的网站。在页脚中，我有两个按钮，联系人和信息。当您单击其中一个按钮时，页面应首先向下滚动，然后淡入相应的内容。当点击另一个按钮时，我想淡出内容淡出新内容，而不是滚动。

然后我希望内容中有一个关闭按钮，一旦点击它会淡出内容然后向上滚动。

我希望这是有道理的。

以下是我的意思http://www.10yearsintype.com/#!stories点击其中一位设计师或加入我们的邮件列表的示例。

这是我可悲的尝试http://jsfiddle.net/ricoshift/LuMr7/

    function toggleSlider() {
if (jQuery("#panelThatSlides").is(":visible")) {
     jQuery('html, body').animate({
    scrollTop: 300
}, 600),
    jQuery("#contentThatFades").animate(
        {
            opacity: "0"
        },
        600,
        function(){
            jQuery("#panelThatSlides").slideUp();
        }
    );
}
else {
  jQuery('html, body').animate({
    scrollTop: 300
}, 600),
    jQuery("#panelThatSlides").slideDown(600, function(){

        jQuery("#contentThatFades").animate(
            {
                opacity: "1"
            },
            600
        );
    });
}   

}

我很乐意帮助解决这个问题。