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

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

EDIT:

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

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

EDIT:

• javascript
• jquery
• jquery-events

4 Answers 4

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

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

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);
 }

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.

delay() only works with animation, IIRC.

This will work for you :)

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

Update

You could also turn it into a jQuery plugin.

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

css isn't an effect, it happens right away. If you want multiple css changes at staggered times, setTimeout is exactly what you want:

var $target = $("#target");
$target.css("color", "blue");
setTimeout(function() {
  $target.css("color", "red");
  setTimeout(function() {
    $target.css("color", "green");
  }, 500);
}, 500);

Live example

If what you're trying to do with css is something you can do with animate instead (e.g., numeric properties rather than colors as above), then your code would largely work if you used animate in place of css.

$("#target")
  .animate({paddingLeft: "50px"})
  .delay(500)
  .animate({paddingLeft: "25px"})
  .delay(500)
  .animate({paddingLeft: "0px"});

Live example

You can still use setTimeout. You'd just need several of them.

Or you can use .animate() with a duration of 0 instead of .css():

Example: http://jsfiddle/6sewU/

$(this).animate({prop:'value'},0).delay(1000)
       .animate({prop:'value'},0).delay(1000)
       .animate({prop:'value'},0);

Note that you'll need jQueryUI installed if you're setting a color with .animate().