HTML5演示文稿-在幻灯片之间添加淡入淡出过渡

Question

我有一个学校作业，要用HTML5创建一个演示文稿，我找到了一个模板来帮助我完成这个作业。这是不完整的，下面是工作模板，我想添加一个幻灯片之间的淡入淡出过渡到这个演示文稿，我不知道该javascript添加淡出过渡。这是工作演示文稿的链接，我希望能得到一些帮助。

http://perlaparra.com/uopx/sandbox/987153624/#intro

Answer 1

你能发布你拥有的代码吗？您可以尝试使用JQuery效果，如下所示：

<div id="clickme">
Click here
</div>
    <img id="book" src="book.png" alt="" width="100" height="123">

    // With the element initially hidden, we can show it slowly:
    $( "#clickme" ).click(function() {
    $( "#book" ).fadeIn( "slow", function() {
    // Animation complete
    });
});

Answer 2

根据您的链接，您不必使用JS淡入库，您可以使用CSS3来处理它，只需将这两行添加到您的CSS中

.slide {
    opacity: 0;
    transition: all 0.5s ease;
}