在 jQuery 中，如何在 css() 中使用多个 delay() 方法？答案

【问题标题】：In jQuery, how to use multiple delay() methods with css()?在 jQuery 中，如何在 css() 中使用多个 delay() 方法？
【发布时间】：2011-03-02 00:12:17
【问题描述】：

如果只有一个延迟我可以使用 setTimeout，我该如何实现以下目标：

$(this).css().delay().css().delay().css();

编辑：

更改的 CSS 值是非数字的。

【问题讨论】：

标签： javascript jquery javascript-events

【解决方案1】：

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 中现有的动画队列工具一起播放。

【讨论】：

【解决方案2】：

delay()only works with animation，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.

【讨论】：

...虽然如果没有按照声明顺序将密钥交还给您，您可能会遇到问题...这不是我尝试过的。

【解决方案3】：

css 不是效果，它会立即发生。如果您想在交错的时间多次更改css，setTimeout 正是您想要的：

var $target = $("#target");
$target.css("color", "blue");
setTimeout(function() {
  $target.css("color", "red");
  setTimeout(function() {
    $target.css("color", "green");
  }, 500);
}, 500);

Live example

如果您尝试使用 css 执行的操作是您可以使用 animate 执行的操作（例如，数字属性而不是上面的颜色），那么如果您使用 animate css的地方。

$("#target")
  .animate({paddingLeft: "50px"})
  .delay(500)
  .animate({paddingLeft: "25px"})
  .delay(500)
  .animate({paddingLeft: "0px"});

Live example

【讨论】：

【解决方案4】：

您仍然可以使用 setTimeout。您只需要其中几个。

或者您可以使用持续时间为0 的.animate() 而不是.css()：

示例： http://jsfiddle.net/6sewU/

$(this).animate({prop:'value'},0).delay(1000)
       .animate({prop:'value'},0).delay(1000)
       .animate({prop:'value'},0);

请注意，如果您使用 .animate() 设置颜色，则需要安装 jQueryUI。

【讨论】：

这将是一个不错的技巧，但 jQuery 表示它只支持单个数值的动画属性；例如，background-image 不起作用。
@ide：好点。这当然取决于所设置的属性。