Question

我想要连续显示几个div。我试过了：

var divs = ["#masterhead", ".links", ".code", ".projects", ".self"]
var fade_time = 1000;
var pause_time = 500;
for(var i = 0; i <= divs.length; i = i + 1)
{
    setTimeout( divs[i].fadeIn(fade_time) , 500) ;
}

我试过了，因为我想要更短的代码而不是（它按照我想要的方式工作）：

    function A()
    {
        jQuery("#masterhead").fadeIn(fade_time);
        setTimeout(B, 500);
    }
    function B(){
        jQuery(".links").fadeIn(fade_time);
        setTimeout(C, 500);
    }

    function C(){
        jQuery(".code").fadeIn(fade_time);
        setTimeout(D, 500);
    }
    function D(){
        jQuery(".projects").fadeIn(fade_time);
        setTimeout(E, 500);
    }

    function E(){
        jQuery(".self").fadeIn(fade_time);
    }   
    A();

那么，在较短的代码中我做错了什么？

Answer 1

使用回调。

var divs = ["#masterhead", ".links", ".code", ".projects", ".self"]
var fade_time = 1000;
var pause_time = 500;
var i = 0;
function startDisplay() {
  i = 0;
  showNext();
}
// just use this function as a callback, each time, to display the next
function showNext() {
  if (!divs[i]) {
    // dernière div
    return
  }

  setTimeout(function () {
    // you can hide the previous one, for example
    //$(divs[i-1]).hide();
    // take the current div, increment it
    $(divs[i++])
      // fade it in, and use the current function as callback
      .fadeIn(fade_time, showNext);
  }, pause_time);
}

Answer 2

这是一种更简单的方法，根本不使用setTimeout(); jQuery的.delay() method更加清晰：

for(var i = 0; i < divs.length; i = i + 1)
{
    $(divs[i]).delay(pause_time * i).fadeIn(fade_time);
}

演示：http://jsfiddle.net/sK99B/

您的代码有四个问题：

divs[i]包含选择器作为字符串，因此您需要使用$(divs[i])来获取可以调用.fadeIn()的jQuery对象。
setTimeout()期望函数作为其第一个参数。您正试图直接调用函数。您可以通过将其包装在匿名函数中来解决此问题。
setTimeout()不会暂停执行，它会将一个函数排队等待以后运行，所以因为所有的超时都设置为500，所以它们都排队等候（几乎）同时运行。 / LI>
for中的条件应使用<，而不是<=。

尝试：

for(var i = 0; i < divs.length; i = i + 1)
{
    (function(i){
       setTimeout( function() { $(divs[i]).fadeIn(fade_time); }, pause_time * i);
    })(i);
}

演示：http://jsfiddle.net/sK99B/1/

请注意，如果传递给setTimeout()的函数使用循环计数器i，则会遇到一个问题，因为在循环完成之后函数才会运行，所有函数都会尝试使用i的最终值 - 所以你需要引入一个闭包，这使得这个方法更加混乱。

Answer 3

试试这个 -

for(var i = 0; i <= divs.length; i = i + 1){
  setTimeout( function(){ 
       $(divs[i]).fadeIn(fade_time);
   } , 500 + (i*pause_time)) ;
}

我可以使用循环连续淡入div吗？

3 个答案: