-2

I want some characters to appear gradually, so i've built this script. However, the delay seems not to execute at all - i tried to put it to several thousands with no change in result. What do i miss?

$(document).ready(function () {

    var 
        i,
        d = [500, 300, 600, 1000],
        t = "String";

    $("body")
        .delay(flashDuration[0])
        .animate({ backgroundColor: "#888888" }, d[1])
        .animate({ backgroundColor: "#222222" }, d[2])
        .animate({ backgroundColor: "#F8ECC2" }, d[3], null, function () {
            for (i = 0; i < t.length; i++)
                $("<span>" + t.substr(i, 1) + "</span>")
                    .addClass("hidden")
                    .delay(i * 2000) /* this delay doesn't execute */
                    .addClass("visible")
                    .appendTo("#floatingName");

        });
});

Please don't bite my head off for d being duration and t being title. I abbreviated the names because every programmer loves cryptic, non-self explanatory, short variable names. Right? Seriously, i tried to avoid wrapping.

Also, i tried to post in on jsFiddle here but the example doesn't even flash the screen, let alone executes the delay properly.

2 Answers 2

2

As far as I know, jQuery still doesn't support color animations natively.

Here's a version of your code on jsFiddle with a color animation extension included:

http://jsfiddle.net/8XUpL/4/

3
  • I see NO difference in the codes WHATSOEVER. Yet, i see a different behavior. Have i gone crazy?! (And yes, i'm using jQuery UI, which i forgot about. Still the main question about delay remains.) Jul 23, 2012 at 16:49
  • 1
    You had mootools selected as framework on your jsFiddle. I'm not very into jsFiddle but I suppose that was one important difference.
    – Jonathan
    Jul 23, 2012 at 17:18
  • Yeah, like @MrAzulay said, you didn't have jQuery selected. Jul 23, 2012 at 20:27
2

The second parameter of animate() is the time the animation should animate over. Not time before the animation starts. You should put in delay() between every animate() in your chain.

$("body")
    .delay(flashDuration[0])
    .animate({ backgroundColor: "#888888" }).delay(d[1])
    .animate({ backgroundColor: "#222222" }).delay(d[2])

and so on...

You could also use the queue option of animate() to make animations stack instead of running immediately after each other.

All explained here http://api.jquery.com/animate/


Edit

Delay does not delay the execution the script it only delays the next item in the animation queue. So it cant be used in this way. You should use setTimeout instead.

http://api.jquery.com/delay/

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

3
  • No, that part is right. My question is about the delay when showing spans, not the flashing (which occurs as i want it it). I want the letters in the spans to get re-classed to .visible after a while, which occurs momentaneously right now. Jul 23, 2012 at 16:43
  • Oh sorry i just assumed you didn't want that cause you called the variable d (for delay). Check my updated answer _^
    – Jonathan
    Jul 23, 2012 at 17:17
  • Haha, i got myself in problem. The variable name is actually the delay while flashing and before the letters are to be displayed. THEN i realized i can shove in all that in the callback function but kept the name. Sorry to mislead you. Nevertheless, it seems to me that delay IS the correct choice. I want to change the class name, wait for a period of time, then change the class name again (or add it, actually). Jul 23, 2012 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.