CODEWITHSUNDEEP
javascriptjqueryjquery-events
Babiker
Babiker

Reputation: 18798

In jQuery, how to use multiple delay() methods with css()?

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:

The CSS values altered are non-numerical.

Upvotes: 2

Views: 2574

Answers (4)

alex
alex

Reputation: 490153

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.

Upvotes: 3

Pointy
Pointy

Reputation: 413702

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.

Upvotes: 4

T.J. Crowder
T.J. Crowder

Reputation: 1074058

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

Upvotes: 2

user113716
user113716

Reputation: 322452

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.net/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().

Upvotes: 1

Related Questions