在jQuery中，如何在css（）中使用多个delay（）方法？
我怎样才能实现以下function，如果只有一个延迟我可以使用setTimeout：
$(this).css().delay().css().delay().css(); 编辑：
改变的CSS值是非数字的。
jQuery“.delay（）”API完全是关于“效果队列”的。 它实际上立即返回。
如果您没有动画CSS更改，唯一的方法是使用“setTimeout（）”。
可能会让事情更愉快的一件事是将CSS更改构建到数组中：
var cssChanges = [ { delay: 500, css: { backgroundColor: "green", fontSize: "32px" }}, { delay: 1000, css: { backgroundColor: "blue", textDecoration: "underline" }}, { delay: 750, css: { position: "relative", marginLeft: "5px" }} ];
然后，您可以使用单个例程遍历具有所需延迟的列表：
function doChanges(cssChanges) { var index = 0; function effectChanges() { $('whatever').css(cssChanges[index].css); if (++index < cssChanges.length) { setTimeout(doChanges, cssChanges[index].delay); } } setTimeout(effectChanges, cssChanges[0].delay); }
如果你愿意，你可以将它变成一个插件，不过如果你打算这样做，最好弄清楚如何让你的插件与jQuery中现有的动画队列设施一起玩。
delay() 仅适用于动画 ，IIRC。
这对你有用:)
// Delay to CSS Properties var cssChanges = [ { delay: 500, css: { color: 'red' }}, { delay: 1500, css: { color: 'blue' }}, { delay: 500, css: { color: 'yellow' }} ]; var element = $('div'), lastDelay = 0; $.each(cssChanges, function(i, options) { lastDelay += parseInt(options.delay); setTimeout(function() { element.css(options.css); }, lastDelay); });
jsFiddle 。
更新
你也可以把它变成一个jQuery插件。
$.fn.delayCss = function(cssChanges) { $(this).each(function() { var element = $(this), lastDelay = 0; $.each(cssChanges, function(i, options) { lastDelay += parseInt(options.delay); setTimeout(function() { element.css(options.css); }, lastDelay); }); }); }
jsFiddle 。
css不是效果，它马上发生。 如果你想在交错的时间进行多次css更改， setTimeout正是你想要的：
var $target = $("#target"); $target.css("color", "blue"); setTimeout(function() { $target.css("color", "red"); setTimeout(function() { $target.css("color", "green"); }, 500); }, 500);
实例
如果您正在尝试使用css ，那么您可以使用animate代替（例如，数字属性而不是上面的颜色），那么如果您使用animate代替css ，那么您的代码将会起作用。
$("#target") .animate({paddingLeft: "50px"}) .delay(500) .animate({paddingLeft: "25px"}) .delay(500) .animate({paddingLeft: "0px"});
实例
您仍然可以使用setTimeout。 你只需要其中几个。
或者你可以使用持续时间为0而不是.css() .animate() .css() ：
示例： http ： //jsfiddle.net/6sewU/
$(this).animate({prop:'value'},0).delay(1000) .animate({prop:'value'},0).delay(1000) .animate({prop:'value'},0);
请注意，如果您使用.animate()设置颜色，则需要安装.animate() 。