2

我有几个要连续显示的 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();

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

4

3 回答 3

5

使用回调。

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);
}
于 2013-05-29T20:26:00.827 回答
3

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

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])来获取可以调用的 jQuery 对象.fadeIn()。
  • setTimeout()期望一个函数作为它的第一个参数。您正在尝试直接调用函数。您可以通过将其包装在匿名函数中来解决此问题。
  • setTimeout()不会暂停执行，它会排队等待稍后运行的函数，因此因为您的所有超时都设置为 500，所以它们都将排队（几乎）同时运行。
  • 你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- 所以您需要引入一个闭包，这使得这种方法更加混乱。

于 2013-05-29T20:27:10.327 回答
1

试试这个 -

for(var i = 0; i <= divs.length; i = i + 1){
  setTimeout( function(){ 
       $(divs[i]).fadeIn(fade_time);
   } , 500 + (i*pause_time)) ;
}
于 2013-05-29T20:26:23.333 回答