jQuery在div之间淡入/淡出

Question

I have this code:

var next = null;
    var outer = jQuery('.banner .container');
    var current = outer.find('.banner-word:first');
    current.fadeIn();
    function fade() {
        if (current.next('div.banner-word').length > 0) {
            next = current.next('div.banner-word');
        } else {
            next = outer.find('.banner-word:first');
        }
        current.fadeOut();
        next.fadeIn();
        current = next;
        setTimeout(fade, 11000);
    }
    // start the process
    fade();

A few problems with it - 1) It seems to ignore the first banner-word div 2) On load it shows quickly shows the first 2 banner-word divs and then starts with the second banner-word div

Am I missing something obvious?

Answer 1

Try changing:

if (current.next('div.banner-word').length > 0) {
    next = current.next('div.banner-word');
} else {
    next = outer.find('.banner-word:first');
}

to:

if (current.next().is('div.banner-word')) {
    next = current.next();
} else {
    next = outer.find('.banner-word:first');
}

Edit: try adding a delay to the initial fade() call. Change

fade();

to

setTimeout(fade, 5000);