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

create sequence steps [animation] with JavaScript or jQuery

本文关键字：动画 JavaScript jQuery 创建 使用      更新时间：2023-09-26

我是javascript新手。

我想一步一步地创建一些序列操作。所以，让我们想象一下，我有10s时间线介绍这个网站如下：

步骤

  1. 显示徽标
  2. 显示网站名称
  3. 显示我的名字
  4. 以及许多其他行动

这是我的尝试

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

但是有没有更好的方法来做这些动作，更干净

您可以使用类似wow.js-http://mynameismatthieu.com/WOW/docs.html

Wow主要用于滚动触发的动画，但也有有用的html数据属性，可以添加到您希望动画化的每个html元素中。E.G:

<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-延迟

相关文章：