CODEWITHSUNDEEP
javascriptjquery
Joe Half Face
Joe Half Face

Reputation: 2333

Kind of custom animation - delay doesn't work

It is custom animation attempt, which works with background-position.

var i = 5;
while(i !== 0) {
  setTimeout(function() {
    $("#feedback-toad").css("height","+=50");
    $("#feedback-toad").css("background-position", "50% "+i*(-20)+"%");
  }, 1000);
  i = i - 1;
}

It works in terms of final result - finally element looks like I want.

But it doesn't look like animation, it happens instantly - looks like delay (timeout) doesn't work.

Why? How I can fix that?

P.S. I don't need plugin suggestion - I would like to do it with my own code. Thanks.

Upvotes: 0

Views: 38

Answers (1)

letiagoalves
letiagoalves

Reputation: 11302

You are setting all callbacks to run at the same time (1000 ms from now).

It should be something like this so it happens 1 animation per second:

var i = 5;
while (i !== 0) {
    setTimeout(function () {
        $("#feedback-toad").css("height", "+=50");
        $("#feedback-toad").css("background-position", "50% " + i * (-20) + "%");
    }, i * 1000);
    i = i - 1;
}

Upvotes: 1

Related Questions