使用JavaScript或jQuery创建序列步骤[动画] [英] create sequence steps [animation] with JavaScript or jQuery

问题描述

我是javascript的新手。



我想一步一步创建一些序列动作。所以，让我们想象一下，我在下面的网站上有10s时间轴介绍：



步骤

1。显示标志

2.显示网站名称

3.显示我的名字

＃。还有很多其他的行动....



这是我的尝试

< 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 =  < span class =code-string>＃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 ）; 
}）; 
}）; 

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

解决方案

（ 。）。fadeIn（ 3000 ， function （）{

（ 。b）。fadeIn（ 4000 ， function （）{

（ < span class =code-string>。c）。fadeIn（ 5000 ）;
}）;
}）;

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

I am newbie at javascript.

I want to create some sequence actions, step by step. And so, let's imagine i have 10s Timeline intro for this web site below:

Steps
1. Show Logo
2. Show Web site name
3. show My name
#. and many many other actions ....

Here is my attempt

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

And also i know that i can write it using jQuery like in this way:

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

But are there any better ways to doing these actions, cleaner?

解决方案

(".a").fadeIn(3000,function(){

(".b").fadeIn(4000, function(){

(".c").fadeIn(5000); }); });

But are there any better ways to doing these actions, cleaner?

这篇关于使用JavaScript或jQuery创建序列步骤[动画]的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！