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

这是一个小提琴：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());
                    });
                }
            });
  }