Pregunta

Tengo dos conjuntos de boxex en una página. 10 cajas pertenecientes a la clase 'boxOne' y otros 10 pertenecientes a la clase 'boxTwo'
Hay un botón Al hacer clic en el botón, estoy usando el efecto jquery para resaltar y luego atenuar el color de fondo de todos los elementos que pertenecen a la clase 'Boxone' y 'Boxtwo'.

A continuación se muestra el código.

var colorOfBox1 = "'" + $(.boxOne).css('backgroundColor') + "'";  
$(.boxOne).animate(
    { 'backgroundColor': "#FF9900" }, 
    { 'queue': false, 'duration': 1000 });

setTimeout( function(){  
        $(.boxOne).animate(
          { 'backgroundColor': colorOfBox1}, 
        {'queue': false, 'duration': 2000} 
      );
}, 2000);

var colorOfBox2 = "'" + $(".boxTwo).css("backgroundColor") + "'";  
$('.boxTwo').animate({ 'backgroundColor': "#FF9900" }, {'queue': false, 'duration': 1000});  
  setTimeout(
    function(){
        $('.boxTwo).animate(  
            { 'backgroundColor': colorOfBox2 }, 
                {'queue': false, 'duration': 2000} 
          );
}, 2000);

Todos los cuadros se resaltan con el color especificado al hacer clic en el botón. Ahora el problema es que a veces pocos de estos cuadros no se desvanecen. Su fondo permanece resaltado. Esto sucede a veces sin consistencia. Quiero un comportamiento consistente.

Veo que la función setTimeOut () no se aplica de manera uniforme a todos los elementos que pertenecen a esa clase ... Se aplica solo a unos pocos elementos.
¿Qué culpa estoy haciendo?

¿Fue útil?

Solución

Ahora estoy usando este complemento y funciona bien.

http://jquery.offput.ca/highlightFade/old.php

Otros consejos

Quizás primero verifique la sintaxis del código Javascript. La sintaxis inconsistente causa resultados inconsistentes en diferentes navegadores.

Parece que faltan algunas comillas alrededor de .boxOne y .boxTwo en algunos lugares. No estoy seguro de si fue un error de formato o intencional. Podría estar causando problemas con algunos navegadores.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top