En jQuery, ¿cómo usar múltiples métodos de retardo () con css ()?

¿Cómo puedo lograr lo siguiente, subrayando que si hubiera un solo retraso, podría usar setTimeout?

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

EDITAR:

Los valores de CSS alterados son no numéricos.

La API jQuery “.delay ()” tiene que ver con la “cola de efectos”. En realidad, vuelve de inmediato.

La única forma de hacerlo, si no está animando los cambios de CSS, es con “setTimeout ()”.

Una cosa que podría hacer las cosas más agradables sería construir los cambios de CSS en una matriz:

 var cssChanges = [ { delay: 500, css: { backgroundColor: "green", fontSize: "32px" }}, { delay: 1000, css: { backgroundColor: "blue", textDecoration: "underline" }}, { delay: 750, css: { position: "relative", marginLeft: "5px" }} ]; 

Luego, puede usar una sola rutina para recorrer la lista con los retrasos deseados:

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

Si lo desea, puede convertirlo en un complemento. Sin embargo, si lo desea, sería mejor averiguar cómo hacer que su complemento se reproduzca junto con las facilidades de cola de animación existentes en jQuery.

delay() solo funciona con animación , IIRC.

Esto funcionará para usted 🙂

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

Actualizar

También puedes convertirlo en un plugin de jQuery.

 $.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 no es un efecto, sucede de inmediato. Si desea múltiples cambios de css en momentos escalonados, setTimeout es exactamente lo que desea:

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

Ejemplo vivo

Si lo que estás tratando de hacer con css es algo que puedes hacer con animate (por ejemplo, propiedades numéricas en lugar de colores como antes), entonces tu código funcionará en gran medida si utilizas animate en lugar de css .

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

Ejemplo vivo

Todavía puedes usar setTimeout. Solo necesitarías varios de ellos.

O puedes usar .animate() con una duración de 0 lugar de .css() :

Ejemplo: http://jsfiddle.net/6sewU/

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

Tenga en cuenta que necesitará jQueryUI instalado si está configurando un color con .animate() .