Show and Hide divs using setInterval more Block

Question

I have seen the stack overflow thread show or hide div based on intervals. I dont know how to add more blocks. there is only two blocks repeated(block1 and block2). I need to add block 3 and 4. Please help me. I am new to jquery.

Code:

var shortIntervalTime = 1500;
var longIntervalTime = 7500;

function cycle(id) {
    var nextId = (id == "block1") ? "block2" : "block1";
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + id)
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(nextId)
    });
    // ---------------------------------------------
    // this code after here only for demo purposes
    var timer;
    var cntr;
    var iterations = 0;

    function initDisplayTimer() {
        cntr = 0;
        ++iterations;
        $("#iterations").html("Iterations: " + iterations);
        if (timer) {
            clearInterval(timer);
        }
        timer = setInterval(function () {
            ++cntr;
            $("#timer").html("Seconds: " + (cntr / 10).toFixed(1));
        }, 100);
    }
    // end of demo code
    // ---------------------------------------------
    cycle("block1");
});

Reference thread

Thanks in advance.

share your html also if possible create a http://jsfiddle.net/ to demonstrate the problem — Arun P Johny, Aug 19 '13 at 06:21

score 0 · Answer 1 · answered Aug 19 '13 at 06:32

I can only see a modification on the conditional statement assigning nextId. the question mark operator works for a single condition. therefore,

replace this code
var nextId = (id == "block1") ? "block2": "block1";

with
var nextId="";
if(id == "block1")
nextId="block2";
else if(id == "block2")
nextId="block3";
else if(id == "block3")
nextId="block4";
else if(id == "block4")
nextId="block1";

but for larger number of blocks you should figure someother way than if statements.

score 0 · Answer 2 · answered Aug 19 '13 at 06:43

http://jsfiddle.net/tamilmani/hT2yM/

try this demo...

var arr = ['block1','block2','block3'];

function cycle(id) {

    var nextId = (id < arr.length)?id:0;
    initDisplayTimer(); // this line here only for demo purposes
    $("#" + arr[nextId])
        .delay(shortIntervalTime)
        .fadeIn(500)
        .delay(longIntervalTime)
        .fadeOut(500, function () {
        cycle(++nextId)
    });
    }

score 0 · Answer 3 · answered Aug 19 '13 at 07:04

with this conde you can add as much as you want of elements

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
    function cycle(id) {
        var shortIntervalTime = 1 * 1000;
        var longIntervalTime = 2 * 1000;
        var next = ($('#'+id).next() && $('#'+id).next().attr('id')?$('#'+id).next().attr('id'):$('#'+id).parent().children()[0].id);
        $('#'+id).delay(shortIntervalTime)
            .fadeIn(500)
            .delay(longIntervalTime)
            .fadeOut(500, function() {cycle(next)});
    }
    $(function(){
        cycle('block1');
    });

    </script>
    <div id="blocks">
        <div id="block1">aaaa</div>
        <div id="block2">bbbb</div>
        <div id="asd">ccc</div>
    </div>

note: all <div> elements should have id or they will not be included

Show and Hide divs using setInterval more Block

3 Answers3