javascript - 使用 JavaScript 或 jQuery 创建序列步骤 [动画]

Question

我是 javascript 的新手。

我想逐步创建一些序列 Action 。因此，让我们想象一下我在下面为这个网站设置了 10 秒的时间轴介绍:

步骤

1. 显示 Logo
2. 显示网站名称
3. 显示我的名字
4. 还有很多其他的 Action ....

---

这是我的尝试

<script type="text/javascript">

  var bod = document.getElementById("_8d4a");
  var preTag = document.getElementById("style-text");
  var stand = document.getElementById("standby");

  setTimeout(function(){ bod.style.backgroundColor = "#000" }, 3000);
  setTimeout(function(){ preTag.style.left = "500px" }, 7000);
  setTimeout(function(){ preTag.style.left = "100px" }, 8000);
  setTimeout(function(){ bod.style.backgroundImage = "url('index.jpg')" }, 7000);
  setTimeout(function(){ bod.style.fontSize = "5em" }, 7000);
  setTimeout(function(){ bod.style.backgroundImage = "url('index1.jpg')" }, 7300);
  setTimeout(function(){ bod.style.fontSize = "1em" }, 7400);
  setTimeout(function(){ stand.style.display = "block" }, 7600);
  setTimeout(function(){ bod.style.backgroundImage = "url('No_signal.gif')" }, 7600);
  setTimeout(function(){ stand.style.display = "none" }, 8500);
  setTimeout(function(){ bod.style.backgroundImage = "none" }, 8500);

</script>

而且我知道我可以像这样使用 jQuery 编写它:

$(".a").fadeIn(3000,function(){
    $(".b").fadeIn(4000, function(){
        $(".c").fadeIn(5000);
    });
});

但是有没有更好的方法来做这些 Action ，清洁工？

Answer 1

您可以使用像 wow.js 这样的库 - http://mynameismatthieu.com/WOW/docs.html

Wow 主要用于由滚动触发的动画，但也有有用的 html 数据属性，可以将其添加到您希望设置动画的每个 html 元素。例如:

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">

这会给出动画(向左滑动)、持续时间(2 秒)和动画触发前的延迟(5 秒)。

对于纯 CSS 解决方案，您可以考虑使用关键帧动画。 CSS 具有 animation-delay 属性，可以很好地满足您的需求 - 这是一个简单的示例:

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_animation-delay