javascript - 在jQuery中，如何将多个delay()方法与css()一起使用？

Question

如何实现以下目标，了解如果只有一次延迟我可以使用 setTimeout:

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

编辑:

更改的 CSS 值是非数字的。

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