jquery delay altering css

问题

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

回答1:

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

回答2:

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

}

回答3:

Try

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

回答4:

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

回答5:

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

来源：https://stackoverflow.com/questions/4509222/jquery-delay-altering-css

标签

javascript

jquery

css

delay