jquery highlight sbiadimento - problema di timeout

Question

Ho due set di boxex su una pagina. 10 scatole appartenenti alla classe 'boxOne' e altri 10 appartenenti alla classe 'boxTwo'
C'è un pulsante. Facendo clic sul pulsante sto usando l'effetto jquery per evidenziare e quindi sfumare il colore di sfondo di tutti gli elementi appartenenti alla classe 'Boxone' e 'Boxtwo'.

Di seguito è riportato il codice.

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

Tutte le caselle sono evidenziate con il colore specificato al clic del pulsante. Ora il problema è che a volte poche di queste caselle non si sbiadiscono. Il loro background rimane evidenziato. Questo succede a volte senza coerenza. Voglio un comportamento coerente.

Vedo che la funzione setTimeOut () non è applicata uniformemente a tutti gli elementi appartenenti a quella classe ... È applicata solo a pochi elementi.
Che colpa sto facendo?

Answer 1

Ora sto usando questo plugin e funziona benissimo.

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

Answer 2

Forse controlla prima la sintassi del codice Javascript. La sintassi incoerente provoca risultati incoerenti su diversi browser.

Answer 3

Sembra che manchi alcuni segni di virgoletta intorno a .boxOne e .boxTwo in alcuni punti. Non sono sicuro che si tratti di un errore di formattazione o intenzionale. Potrebbe causare problemi con alcuni browser.