jquery delay altering css

Question

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"});
    });
});

T.J. Crowder · Accepted Answer · 2010-12-22 12:41:16Z

8

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);
    });
});

answered Dec 22, 2010 at 12:41

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rahul · Accepted Answer · 2010-12-22 12:40:21Z

4

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"});

}

answered Dec 22, 2010 at 12:40

rahul

188k50 gold badges239 silver badges266 bronze badges

Comments

Andy · Accepted Answer · 2010-12-22 12:41:11Z

2

Try

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

answered Dec 22, 2010 at 12:41

Andy

30.2k9 gold badges43 silver badges59 bronze badges

Comments

Gabriele Petrioli · Accepted Answer · 2010-12-22 12:42:40Z

1

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"});
       });
    });
});

answered Dec 22, 2010 at 12:42

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

Felix Kling · Accepted Answer · 2010-12-22 13:09:01Z

1

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

edited Dec 22, 2010 at 13:09

answered Dec 22, 2010 at 12:43

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

jquery delay altering css

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related