Javascript setInterval需要太长时间才能重置

Question

Hey I have a panel (br_Panel) that contains four divs with the class 'smallPanel' and id br_Panel1, br_Panel2, etc that are of the same and equal size and positioned overlapping each other. When the function runs, every 5 seconds one fades out and shows the one below, and when they have all faded out they all come back with the fadeIn. The problem is the pause between the last div's fadeout and the fadein for all of them is 15 seconds, three times as long as it takes each div to leave. How can I reduce this pause in reset time to 5 seconds?

setInterval(function() {
    if(i < 0) {
        $('#br_Panel').find($('.smallPanel')).fadeIn();
        i = 5;
    }
    else
        i--;
    $('#br_Panel').find($('#br_Panel' + i)).fadeOut();
}, 5000);

This is the html (if it helps, each of the innermost divs is positioned absolute to #br_Panel so that they overlap each other):

<div class="height1 panel" id="br_Panel">
    <div class="smallPanel" id="br_Panel1">content</div>
    <div class="smallPanel" id="br_Panel2">content</div>
    <div class="smallPanel" id="br_Panel3">content</div>
    <div class="smallPanel" id="br_Panel4">content</div>
</div>

Answer 1

You mentioned that your br_Panel contains four divs with the class smallPanel, but your interval function will run six times before i is reset (5, 4, 3, 2, 1, 0). It may be that your function is running 2 more times than needed, which causes your delay to be 10 seconds longer than it should be.

As an additional note, when using .find(), you need only pass in the string css selector you are using, not the enter jQuery object:

$('#br_Panel').find('.smallPanel').fadeIn();