HTML5加载标题动态点击Div或屏幕

Question

对于每次点击最后加载的标题时动态加载新标题，或者通过点击幻灯片或屏幕，就像你可以使用类似于PowerPoint的过渡"飞进"每次点击屏幕或使用箭头键时加载新的文本块，我正在寻找HTML5解决方案。每次点击都应该加载一个新的标题。

为此，我可以使用jQuery的fadeIn和fadeOut效果，但我还没能弄清楚如何加载一个又一个标题，并保持较早加载的标题在顶部，然后是新加载的标题。

我发现这个小提琴使用jQuery的fadeIn和fadeOut: http://jsfiddle.net/Fyhm7/:

    <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; }

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

还发现了另一个类似的解决方案在这里HTML5加载数据部分当点击导航链接

前一个示例显示了几个标题，并加载附加到该标题的内容。后者的功能类似。

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

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

Answer 1

如果你愿意，你可以使用css动画。这个网站列出了很多可用的css动画http://daneden.me/animate/。这并不完全是你想做的，只是显示css动画能够做什么。