CODEWITHSUNDEEP
javascripthtml
zqk
zqk

Reputation: 75

set backgroundPosition and setInterval

So I made a code

function slide()
{
    var x=1;
    while (x<=512) 
    {
        document.getElementById("slide").style.backgroundPosition = x+"px 0px";
        x++;
    }
}

JSFIDDLE

I want to make a transition from backgroundPosition - 0 to backgroundPosition 512. This code above changes immediately from 0 to 512, I want to make it like 1<100ms break>, 2, 3...
I tried change x++ to setTimeout(function(){x++), 100) but it doesn't do anything.

Upvotes: 0

Views: 70

Answers (1)

Anthony Bastide
Anthony Bastide

Reputation: 60

Use setTimeout() and call function : 

function slide(x) 
{
    if(x==undefined) var x = 1;
    if(x >= 512) return;
    document.getElementById("slide").style.backgroundPosition = x+"px 0px";
    x++;
    setTimeout(function() {
        // recall function and add other code if you want.
        slide(x);
    }, 100);
}
slide();

Upvotes: 1

Related Questions