在jQuery中,如何在css()中使用多个delay()方法?

r9f1avp5  于 2022-12-18  发布在  jQuery
关注(0)|答案(4)|浏览(105)

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

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

编辑:

更改的CSS值为非数值。

rdlzhqv9

rdlzhqv91#

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中现有的动画队列设施沿着运行。

5w9g7ksd

5w9g7ksd2#

第一章第一章第一章第二章。
这将为您工作:)

// 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 .

ig9co6j1

ig9co6j13#

css不是一个效果,它会立即发生。如果您希望在交错的时间多次更改csssetTimeout正是您想要的:

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

bhmjp9jg

bhmjp9jg4#

您仍然可以使用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。

相关问题