Ejecutando una línea después de finalizar la línea anterior en jquery

Soy nuevo en jQuery y estoy probando un programa simple. En este programa, lo que intento lograr es que cuando haga clic en el texto div, la primera línea se difuminará y luego cambiará de color de fondo y luego se desvanecerá, por lo que en general dará un efecto de cambio de color lentamente, pero lo que sucede aquí cuando hago clic en el texto, la línea cambia de color de repente, luego se desvanece y luego se desvanece. Me preguntaba si hay una forma de hacer que el código de cambio de color se ejecute después de la ejecución de fadeout.Ejecutando una línea después de finalizar la línea anterior en jquery

mi programa:

 $(document).ready(function(){ 
      $("#firstDiv").click(function(){ 
       //     $(this).fadeOut(1000); 

       $(this).fadeOut(1000); 

       $(this).css("background-color", "aqua"); 

       $(this).fadeIn(1000); 


      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="firstDiv" style="background-color: yellowgreen"> 
     Click Me 
    </div> 
</body>

Fuente

2011-03-14 Sandeep Kumar

Puede utilizar la función de devolución de llamada de fadeOut() así:

$(this).fadeOut(1000, function(){ 
    $(this).css("background-color", "aqua").fadeIn(1000); 
});

Fuente

2011-03-14 09:41:58 YNhat

Tienes que poner el cambio de color en una devolución de llamada se pasa a fadeOut:

$(this).fadeOut(1000, function() { 
    $(this).css("background-color", "aqua"); 
}).fadeIn(1000);

Everyt hing usted puso en la devolución de llamada se ejecuta después de fadeOut terminado. fadeIn no se ejecuta inmediatamente porque los métodos de efectos son queued automáticamente.

Pero: Si usted está haciendo algo computacional caro (es decir, se necesita tiempo) en la devolución de llamada y al que desea llamar fadeIn sólo después de esto ha terminado, usted tiene que poner fadeIn en la devolución de llamada también:

$(this).fadeOut(1000, function() { 
    $(this) 
     .css("background-color", "aqua") 
     .fadeIn(1000); 
});

De lo contrario, se llamará a fadeIn antes de que finalice la devolución de llamada.

También vale la pena leer en este contexto: Can somebody explain jQuery queue?

Fuente

2011-03-14 09:34:16

¿Por qué la cadena de la decoloración de forma automática, pero el cambio css no lo hace? – poke

@poke: Acabo de agregar esto a mi respuesta;) –

La API de cola jQuery podría valer la pena un vistazo, que está destinado a dejar que hacer cola una secuencia de acciones que se aplicarán al elemento seleccionado.

http://api.jquery.com/queue/

Fuente

2011-03-14 09:37:16 GordonM

Ejecutando una línea después de finalizar la línea anterior en jquery

Respuesta

Cuestiones relacionadas