通过jQuery以不同的间隔更改CSS背景图像 [英] Change CSS background-image with different intervals via jQuery

问题描述

我正在尝试通过jQuery更改div的背景，并且图像之间的延迟有所不同.到目前为止，我已经知道了:

I'm trying to change the background of a div via jQuery with a different delay between the images. So far I've got this:

$(document).ready(function() {
    $("#Top").delay(10000).queue(function(){
        $(this).css({"background-image":"url(img/Top_Green.jpg)"}); 
     });
});

哪个工作正常，但我真正想要的是:

Which works just fine, but what I really want is this:

• 原始背景
• 延迟
• 背景2
• 短暂延迟
• 背景3
• 延迟

然后循环执行这些步骤.我已经看到了不同的方法，但是总是有1个设定的时间间隔.我一直在尝试使用上面的代码来尝试将更多项目放入队列中，但我始终无法正常工作.

And then loop those steps. I've seen different ways to do it, but there was always 1 set interval. I've been playing around with the code up there trying to put more items in the queue, but I never get it to work.

推荐答案

我不确定这是否是最佳解决方案.看看 http://jsfiddle.net/h4KL7/1/

I'm not sure if this is optimal solution. Take a look http://jsfiddle.net/h4KL7/1/

var rotate = function() {
  $("#Top")
    .delay(1000).queue(function() {
        $(this).css({
            "background-color": "red"
        });
        $(this).dequeue();
    })
    .delay(3000).queue(function() {
        $(this).css({
            "background-color": "green"
        });
        $(this).dequeue();
    })
    .delay(500).queue(function(next) {
        $(this).css({
            "background-color": "blue"
        });
        $(this).dequeue();
        next();
    })
    .queue(rotate);
};

rotate();

这篇关于通过jQuery以不同的间隔更改CSS背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！