Question

我有一个jQuery代码，假设将div设为蓝色，然后等待3秒，然后再将其恢复为黑色。但它只是保持原有的颜色，黑色，并且在变回黑色之前根本不会变成蓝色。我究竟做错了什么？

var myStr = '[[Line1TextA,[Lat,Long]], [Line1TextB,[Lat,Long]]]'
//-------------^

这是一个小提琴：http://fiddle.jshell.net/5wjy9aqu/1/

Answer 1

这是因为delay没有那样的工作。

你可以这样做：

$('#div').css("background-color", "blue");
setTimeout(function(){
    $('#div').css("background-color", "black");
}, 3000);

如果你真的在delay上侮辱，你也可以使用队列。

$('div').css('background-color', 'blue').delay(3000).queue(function(){
     $(this).css('background-color', 'black');
     $(this).dequeue();
});

如果你问我，那不是一个很好的选择。

Answer 2

请使用jQueryUI并添加$(function () { $("#div").animate({ "background-color": "blue" }, 1000) .delay(3000) .animate({ "background-color": "black" }, 1000); });以设置动画颜色。

$("#block").animate({
  backgroundColor: $.Color({ saturation: 0 })
}, 1500 );

小提琴：http://fiddle.jshell.net/zydLvbuf/

好吧，如果你不想添加整个jQueryUI，你也可以添加custom plugin来为动画颜色添加动画。

{{1}}

Answer 3

在现代浏览器中，您还可以使用以下仅限CSS的解决方案：http://fiddle.jshell.net/otzm74xk/。

CSS：

#div {
    width: 250px;
    height: 250px;
    background-color: blue;
    animation: blacken 0s linear 3s 1 forwards;
}

@keyframes blacken {
    100% {
        background-color: black;    
    }
}

将div更改为不同的颜色，等待3秒，然后使用jQuery更改颜色

3 个答案: