How can I achieve the following, understanding the if there was only one delay I could use setTimeout:
$(this).css().delay().css().delay().css();
Add a comment
|
4 Answers
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.
Comments
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);
});
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);
});
});
}
1 Comment
Pointy
... though you may run into an issue if the keys aren't handed back to you in declaration order ... that's not something I've experimented with.
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);
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"});
Comments
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().
2 Comments
ide
This would be a nice trick but jQuery says it only supports animating properties that are a single numeric value; e.g.,
background-image wouldn't work.
user113716
@ide: Good point. It'll certainly depend on the property being set.