在jQuery中,如何在css()中使用多个delay()方法? [英] In jQuery, how to use multiple delay() methods with css()?

查看:101
本文介绍了在jQuery中,如何在css()中使用多个delay()方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

How can i achieve the following, understading the if there was only one delay i could use setTimeout:

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

编辑:

改变的CSS值是非数字的。

The CSS values altered are non-numerical.

推荐答案

jQuery.delay()API是关于效果队列的。它实际上会立即返回。

The jQuery ".delay()" API is all about the "effects queue". It actually returns immediately.

如果您动画CSS更改,唯一的方法是使用setTimeout() 。

The only way to do this, if you're not animating the CSS changes, is with "setTimeout()".

可能会让事情变得更加愉快的一件事就是将CSS更改构建成一个数组:

One thing that might make things more pleasant would be to build your CSS changes into an array:

var cssChanges = [
  { delay: 500, css: { backgroundColor: "green", fontSize: "32px" }},
  { delay: 1000, css: { backgroundColor: "blue", textDecoration: "underline" }},
  { delay: 750, css: { position: "relative", marginLeft: "5px" }}
];

然后,您可以使用单个例程遍历列表并获得所需的延迟:

Then you can use a single routine to walk through the list with the desired delays:

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

You could turn it into a plugin if you wanted, though if you were going to do that it might be better to figure out how to make your plugin play along with the existing animation queue facilities in jQuery.

这篇关于在jQuery中,如何在css()中使用多个delay()方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆