jquery - JQuery 最佳实践：在元素之间按顺序运行效果

Question

还有比这更好的方法吗？请让我向你学习。TIA

$('ul').children(':first-child').delay('fast').fadeToggle('fast', function () {
    $(this).delay().fadeToggle(function () {
        $(this).next().delay().fadeToggle(function () {
            $(this).delay().fadeToggle(function () {
                $(this).next().delay().fadeToggle(function () {
                    $(this).delay().fadeToggle(function () {
                        $(this).closest('#welcome').next().toggle();
                        $(this).closest('#welcome').slideToggle(function () {
                            $(this).remove();
                            $('body').css('overflow', 'auto');
                        });
                    });
                });
            });
        });
    });
});

http://jsfiddle.net/rKVkd/

Answer 1

尝试

$('#welcome, #content').height($(window).height());

function toggleUl($ul, complete) {
    var $li = $ul.find('.current').removeClass('current').next();
    if (!$li.length) {
        $li = $ul.children().first();
    }
    $li.addClass('current')
    $li.fadeIn('fast', function () {
        $(this).delay(250).fadeOut('fast', function () {
            var $this = $(this);
            if ($this.is(':last-child')) {
                complete();
            } else {
                toggleUl($ul, complete);
            }
        })
    });
}

toggleUl($('ul'), function () {
    $('#welcome').next().toggle();
    $('#welcome').slideToggle(function () {
        $(this).remove();
        $('body').css('overflow', 'auto');
    });
});

演示：小提琴

Answer 2

试试这个，你可以将 flash_show 应用到任何列表来达到同样的效果。节目结束时会调用一般回调。

演示

function flash_show(cb) {
    var $e = $(this).next();

    $(this).fadeToggle().delay().fadeToggle('fast', function () {
        $e.size() == 0 ? cb.call(this) : flash_show.call($e, cb);    
    })
}

flash_show.call($('ul li')[0], function () {
    $(this).closest('#welcome').next().toggle();
    $(this).closest('#welcome').slideToggle(function () {
        $(this).remove();
        $('body').css('overflow', 'auto');
    });
})