jquery - 要素を次々に表示する

Question

要素を次々と表示したいのですが…例えばdivに要素が10個ある場合、次々と表示したいです。ただし、一度に 1 つのアイテムのみです。以下のコードを書きましたが、期待通りに動作しません..

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

ここにフィドルがあります：http://jsfiddle.net/VesQ/chw3f/5/

Answer 2

これを試して..

コールバック関数を使用してみてください。操作が完了すると、コールバック関数が実行されます。

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

                }
                else {
                    c.fadeOut(3000, function() {
                         fades(c.next());
                    });
                }
            });
  }