Question

我正在尝试重置一些css但是在点击后有一段延迟。出于某种原因，延迟似乎被忽略了。有什么想法吗？

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

Answer 1

我不相信css参与效果，所以它不会知道队列。来自delay docs：

仅延迟队列中的后续事件;例如，这不会延迟不使用效果队列的.show()或.hide()的无参数形式。

非常确定css也在该列表中。

没问题，但是;你可以这样做：

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

Answer 2

使用setTimeout()代替.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"});

}

Answer 3

尝试

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

Answer 4

引自.delay()

只有队列中的后续事件被推迟了;

.css()方法不使用队列。

您需要使用超时

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

Answer 5

css不是动画功能。它不能是delay。

您可以使用animate：

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

但它仅适用于数字属性，而不适用于background-color。为此，您可以使用jQuery UI animate：

jQuery UI效果核心扩展了animate功能，以便能够为颜色设置动画。它被类转换功能大量使用，并且能够为以下属性设置颜色动画：

的backgroundColor
  borderBottomColor
  borderLeftColor
  borderRightColor
  borderTopColor
  颜色
  outlineColor

jquery延迟改变css

5 个答案: