依次显示元素 [英] Display elements one after another

问题描述

我试图一个接一个地显示元素...例如，如果div中有10个元素，我想一个接一个显示.但是一次只能有一个物品.我已经写了下面的代码，但是没有按预期工作.

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

谢谢

推荐答案

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/

这篇关于依次显示元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！