0

每次单击最后加载的标题或单击幻灯片或屏幕时动态地将新标题加载到视图中，就像每次单击屏幕时使用类似于 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 Loading data-section

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

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

周围有什么更好的例子更接近我的需要吗？

4

1 回答 1

1

如果需要，可以使用 css 动画。该网站列出了许多可用的 css 动画http://daneden.me/animate/。它并不完全是在做你想做的事情，而只是展示了 css 动画能够做什么。

于 2013-04-11T02:38:21.683 回答