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