Question

I am trying to display elements one after another… For example if there are 10 elements in a div, I want to display one after one. But only one Item at a time. I have written the below code but it is not working as expected..

 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());
                }
            });
  }

Thanks

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

Here’s a fiddle: http://jsfiddle.net/VesQ/chw3f/5/