Jquery HTML5在单击Div或Screen时动态加载标题

为了在每次单击上次加载的标题或单击幻灯片或屏幕时动态地将新标题加载到视图中，就像每次单击屏幕或使用箭头键时使用类似于PowerPoint的转换“飞入”一样，我正在寻找HTML5解决方案。每次单击都应加载一个新标题

为此，我可以使用jQuery的fadeIn和fadeOut效果，但我无法确定如何加载一个又一个标题，并将先前加载的标题保持在顶部，然后是新加载的标题

我使用jQuery fadeIn和fadeOut找到了这个小提琴：

家
产品
接触
$（“a”）。在（“单击”，函数（）{
变量id=$（此）.data（“节”）；
$（“节：可见”）.fadeOut（函数（）{
$（id.fadeIn（）；
});
});
部分{
显示：无；
}
#主页{高度：200px；背景：米色；显示：块；}
#产品{高度：1000px；背景：蜜露；}
#联系人{高度：500px；背景：seashell；}

但它并不像我们在Flash或PowerPoint中看到的那样漂亮。此外，它只是一个菜单加载页面上的菜单内容，单击。我需要在每次单击时添加新内容

在这里也找到了另一个类似的解决方案

前一个示例显示多个标题并加载附加到该标题的内容。后一个示例执行类似的操作

我需要的是一个新的标题显示在点击屏幕或以前加载的标题。也许这可以用类似的代码来完成。想法

---

有没有更好的例子更接近我的需要？

如果你愿意，你可以使用css动画。这个网站列出了很多可用的css动画。它并不完全是在做你想做的事情，只是展示css动画能够做什么。

FadeDown或BounceDown看起来像是一种有趣的css技术。但是，如果每次单击包装器或上一个褪色/反弹的标题时，我都要加载10个标题或答案，该怎么办？有可能吗？有可能，你需要给元素添加一个类，这个类会为你制作动画。

    <a href="#" data-section="#home">Home</a>
    <a href="#" data-section="#products">Products</a>
    <a href="#" data-section="#contact">Contact</a>

    <div id="wrapper"></div>

    <section id="home">Home</section>
    <section id="products">Products</section>
    <section id="contact">Contact</section>
    $("a").on("click", function() {
        var id = $(this).data("section");

        $("section:visible").fadeOut(function() {
            $(id).fadeIn();
        });
    });

section {
    display: none;
}

    #home { height: 200px; background: beige; display: block;}
    #products { height: 1000px; background: honeydew; }
    #contact { height: 500px; background: seashell; }