jQuery pick next div in a list to show

Question

Hey,

I have some jQuery going here:

$('#ticker1').hide();
$('#ticker2').hide();
$('#ticker3').hide();

$("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */

    var randomNum = Math.floor(Math.random()*3); /* Pick random div to show */
    $('div#ticker div:eq(' + randomNum + ')').show();

    $("#ticker").animate({right: "0"}, {duration: 800 });

});

$("#ticker").oneTime(20000,function(i) { /* Do the first retract once */

    $("#ticker").animate({right: "-450"}, {duration: 800});

    $("#ticker").oneTime(1000,function(i) { 

        $('#ticker1').hide();

    });

});

$("#ticker").everyTime(21500,function(i) { /* Everytime timer gets to certain point */

    var randomNum = Math.floor(Math.random()*3);
    $('div#ticker div:eq(' + randomNum + ')').show();

    $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */

    $("#ticker").oneTime(20000,function(i) { /* Retract once */

        $("#ticker").animate({right: "-450"}, {duration: 800});

    });

    $("#ticker").oneTime(21000,function(i) { /* Hide all divs once */

        $('#ticker1').hide();
        $('#ticker2').hide();
        $('#ticker3').hide();

    });

});

I am trying to get it to show a random div the first time it pulls out, which has been accomplished in the first part of the code. But after that right now I have it grabbing a random div (out of 3 divs) everytime after that too. I need to change this part of the code so it looks at the list of 3 divs and goes to the next one down every time.

So if the first time the div that pulled out was 2 then every time after that would go in this order: div 3, div 1, div 2, div 3, div 1 etc.

Here is a demo of what is going on right now: treethink.treethink.net/backup

Thanks, Wade

Answer 1

instead of generating a new random number every time, generate it first then increment it with a mod 3, that way you will get the next divs in order.

for example, if your random number generated 2, the next one would be 3%3 = 0, then 1%3 = 1 then 2%3 = 2 and so on.

var randomNum = Math.floor(Math.random()*3);

$("#ticker").everyTime(21500,function(i) { /* Everytime timer gets to certain point */

randomNum = (randomNum+1)%3;

$('div#ticker div:eq(' + (randomNum) + ')').show();


$("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */


$("#ticker").oneTime(20000,function(i) { /* Retract once */

    $("#ticker").animate({right: "-450"}, {duration: 800});

});

$("#ticker").oneTime(21000,function(i) { /* Hide all divs once */

    $('#ticker1').hide();
    $('#ticker2').hide();
    $('#ticker3').hide();

});
});

Answer 2

Try this.

$(document).ready(function() {
    var tickers = [
        $('#ticker1'),
        $('#ticker2'),
        $('#ticker3'),
        ];
    for (var i in tickers) tickers[i].hide();

    var cur = Math.floor(Math.random()*3);

    nextslide();

    function nextslide() {
        var ticker = tickers[cur];
        if (cur++=>tickers.length) cur=0;

        ticker.fadeIn(300, function() {
            setTimeout(2000, function(){ 
                // note the (pseudo) recursion, calling nextslide
                ticker.fadeOut(300, nextslide);
            });
        });
    }
});

I have not tested it. I'd avoid the modulo trick: it needs explanation, and you lose your current position if you add extra slides.