Display elements one after another

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

Can you setup a jsfiddle? It helps to know the structure and how the JS is getting called — Dunhamzzz, Aug 02 '12 at 10:52

valscion · Accepted Answer · 2012-08-02T11:48:55.183

3

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/

edited Aug 02 '12 at 11:48

answered Aug 02 '12 at 11:09

valscion

580
4
13

Its perfect.. But could you please edit to display first element again after fadingOut last element in DIV..? – Exception Aug 02 '12 at 11:17
You can do it yourself. Inside the fadeOut callback, add an "else" statement after the `if (!$div.is('last-child'))` to then show the first element with `$("#fades div:first-child).fadeIn()` – valscion Aug 02 '12 at 11:21
I have tried to add this code in else condition `fades($("#fades div:first-child"));` But it did not work.. Please check this http://jsfiddle.net/chw3f/2/ – Exception Aug 02 '12 at 11:27
Yes, I tried it myself too and saw that it didn't work. I'll fiddle around and edit my answer shortly. EDIT: There it is now. – valscion Aug 02 '12 at 11:31
All jQuery objects have a `length` property and it can be used to check for valid objects. See http://docs.jquery.com/Types#jQuery – valscion Aug 02 '12 at 11:36
Oh, I just misunderstood your question, then. Here's the fixed fiddle: http://jsfiddle.net/VesQ/chw3f/5/ – valscion Aug 02 '12 at 11:47

score 0 · Answer 2 · answered Aug 02 '12 at 10:52

Try this..

Try to use callback function. Call back function are executed when the operation is completed.

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

Display elements one after another

2 Answers2

Linked