javascript - 5 秒后淡出 1 个 Div，然后淡入另一个 Div

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 8 年前。

Improve this question

我正在尝试淡出#one然后淡入#two 5秒后。我试图使文件尽可能小，因此宁愿不使用像 jquery 这样庞大的库，因为它只会显示在移动设备上。

<div id="one">div one</div>
<div id="two">div two</div>

Answer 1

您可以使用 GSAP 库，即使在大多数移动设备上，它的性能也比 jQuery 更好。

包括 GSAP

//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.1/TimelineLite.min.js

HTML

<div id="one">div one</div>
<div id="two">div two</div>

Javascript

window.onload = function(){
var greenbox = document.getElementById("one");
var bluebox = document.getElementById("two");
var tl = new TimelineLite();
    /* Fading in and out */
    tl.to(one, 2, {autoAlpha:0, ease:Power1.easeInOut})
    tl.to(two, 2, {autoAlpha:1, ease:Power1.easeInOut}, "-=0.5");
}

这是一个 fiddle http://jsfiddle.net/qkds4c2d/ - 您可以使用 CSS 进行样式和定位。