1

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:

  • Original Background
  • delay
  • Background 2
  • short delay
  • Background 3
  • delay

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.

Nerijus G
  • 918
  • 13
  • 28
HankSmackHood
  • 4,673
  • 7
  • 29
  • 30

2 Answers2

5

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();
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • As a charm, thanks. For some reason it didn't execute itself though, but by putting "rotate();" within "$(document).ready(function()" it worked just fine. – HankSmackHood Feb 21 '12 at 14:40
1

If you want to animate it, simply add this to your body-css.

-webkit-transition: 3s;
-moz-transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
transition: 3s;
Aart den Braber
  • 864
  • 1
  • 11
  • 23