Question

I have this JavaScript/jQuery animation function going here and I want it to loop for every 3000 using window.onload = function(){}, but for some reason it’s not working. I think it could by syntax/foundational errors as I am new to javascript, but if I should use a different method please tell me. Here’s my code:

function animTile(){
    $(".main-content").delay(3000).animate({
        top: "100%"
    });

    $(".secondary-content").delay(3000).animate({
        top: "0"
    });
}

window.onload = function(){
    animTile(); setInterval(animTile, 3000);
}

Edit:

Maybe this could also help. Here’s my CSS code:

    #wrap {
        display: block;
        height: 328px;
        width: 568px;
        overflow: hidden;
    }

    #wrap .main-content {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0%;
    }

    #wrap .secondary-content {
        display: block;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 100%;
    }

Answer 1

Try something like this:

 function animTile(){
$(".main-content").delay(3000).animate({
    top: "100%"
});

$(".secondary-content").delay(3000).animate({
    top: "0"
});
 animTileTwo();
}

function animTileTwo(){
$(".main-content").delay(3000).animate({
    top: "0"
});

$(".secondary-content").delay(3000).animate({
    top: "100%"
});
}


  window.onload=function(){
     setInterval("animTile()", 3000);
 }