Question

jQuery(document).ready(function(){
    jQuery('div').css('background','#fff').delay(12000).css('background','#000');
});

嗨伙伴..我想知道为什么这不起作用..我正在尝试设置背景的持续时间并在特定时间后更改颜色。

Answer 1

您可以尝试setTimeout

jQuery(document).ready(function(){
    var divs = jQuery('div').css('background','#fff')
    setTimeout(function(){ divs.css('background','#000'); }, 12000);
});

Answer 2

您可以使用纯CSS

执行此操作

http://jsfiddle.net/austinpray/Q8TVX/

 body {
  animation:color-change 5s 1;
  -webkit-animation:color-change 5s 1; /* Safari and Chrome */
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
}

@keyframes color-change
{
  0% {background:#fff;}
  90% {background:#fff;}
  100% {background:#000;}
}

@-webkit-keyframes color-change /* Safari and Chrome */
{
  0% {background:#fff;}
  90% {background:#fff;}
  100% {background:#000;}
}

您可以更改动画属性以获得所需的效果。

http://caniuse.com/#feat=css-animation

Answer 3

由于.delay()仅适用于jQuery的标准效果队列或自定义队列，因此您可能只想使用setTimeout()调用。

jQuery(document).ready(function(){
    jQuery('div').css('background','#fff')
    setTimeout( function(){ jQuery('div').css('background','#000'); }, 12000);
});

jsFiddle example （有三秒超时可以更快地看到）

Answer 4

jQuery延迟函数将执行队列中的后续函数。所以你必须排队：

$('div').css('background','#fff').delay(12000).queue(function(nxt){
     $(this).css('background','#000');
     nxt(); // continue the queue
 });

尝试jsfiddle demo

希望这对你有所帮助。

如何在jquery中设置后台持续时间

4 个答案: