jquery - 依次显示元素

Question

我正在尝试一个接一个地显示元素...例如，如果一个div中有10个元素，我想一个接一个地显示。但一次只能选择一件元素。我已经编写了下面的代码，但它没有按预期工作..

 function fades(c) {
            var x = c;
            c.fadeIn(3000, function () {
                if (c.is('last-child')) {
                    c.fadeOut(3000);
                    fades(c);
                }
                else {
                    c.fadeOut(3000);
                    fades(c.next());
                }
            });
  }

谢谢

Answer 1

HTML

<div id="fades">
    <div>Hello #1</div>
    <div>Hello #2</div>
    <div>Hello #3</div>
    <div>Hello #4</div>
    <div>Hello #5</div>
    <div>Hello #6</div>
    <div>Hello #7</div>
    <div>Hello #8</div>
    <div>Hello #9</div>
    <div>Hello #10</div>
</div>

JavaScript

// First hide them all
$("#fades div").hide();

function fades($div, cb) {
    $div.fadeIn(100, function () {
        $div.fadeOut(100, function () {
            var $next = $div.next();
            if ($next.length > 0) {
                fades($next, cb);
            }
            else {
                // The last element has faded away, call the callback
                cb();
            }
        });
    });
}

function startFading($firstDiv) {
    fades($firstDiv, function () {
        startFading($firstDiv);
    });
}

startFading($("#fades div:first-child"));

这是一个 fiddle :http://jsfiddle.net/VesQ/chw3f/5/