I am trying to reset some css but with a delay after the click. For some reason the delay seems to be getting ignored. Any ideas?

$("#closeMe").live("click", function() {
    $("#selectContainer").fadeOut( function() {
        scrollerPos = 1
        $(".scroller").delay(3000).css({"margin-left":"0px"});
        $("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
        $("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
    });
});

I am trying to reset some css but with a delay after the click. For some reason the delay seems to be getting ignored. Any ideas?

$("#closeMe").live("click", function() {
    $("#selectContainer").fadeOut( function() {
        scrollerPos = 1
        $(".scroller").delay(3000).css({"margin-left":"0px"});
        $("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
        $("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
    });
});

• javascript
• jquery
• css
• delay

5 Answers 5

I don't believe css participates in the effect stuff, so it won't be aware of the queue. From the delay docs:

Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

Pretty sure css is on that list too.

No problem, though; you can do this:

$("#closeMe").live("click", function() {
    $("#selectContainer").fadeOut( function() {
        scrollerPos = 1
        setTimeout(function() {
            $(".scroller").css({"margin-left":"0px"});
            $("#selectContainer img")..css({"background-color":"#FFF"});
            $("#selectContainer img:eq(0)").css({"background-color":"#000"});
        }, 3000);
    });
});

Use setTimeout() instead of .delay()

setTimeout(resetCSS, 3000);

function resetCSS() {
    $(".scroller").css({"margin-left":"0px"});
    $("#selectContainer img").css({"background-color":"#FFF"});
    $("#selectContainer img:eq(0)").css({"background-color":"#000"});

}

Try

setTimeout(function(){
    $(".scroller").css({"margin-left":"0px"});
    $("#selectContainer img").css({"background-color":"#FFF"});
    $("#selectContainer img:eq(0)").css({"background-color":"#000"});
},3000);

quote from .delay()

Only subsequent events in a queue are delayed;

the .css() method does not use the queue.

You need to use a timeout

$("#closeMe").live("click", function() {
    $("#selectContainer").fadeOut( function() {
        scrollerPos = 1
       setTimeout(function(){
              $(".scroller").delay(3000).css({"margin-left":"0px"});
              $("#selectContainer img").delay(3000).css({"background-color":"#FFF"});
              $("#selectContainer img:eq(0)").delay(3000).css({"background-color":"#000"});
       });
    });
});

css is not an animated function. It cannot be delay ed.

You can use animate for that:

$(".scroller").delay(3000).animate({"marginLeft":0}, 0);

But it only works with numeric properties, not background-color. For that you can use jQuery UI animate:

The jQuery UI effects core extends the animate function to be able to animate colors as well. It's heavily used by the class transition feature and it's able to color animate the following properties:

backgroundColor
borderBottomColor
borderLeftColor
borderRightColor
borderTopColor
color
outlineColor