Pergunta

Eu tenho dois conjuntos de boxex em uma página. 10 caixas que pertencem a classe 'boxOne' e outros 10 pertencentes à classe
'boxTwo' Existe um botão. No clique de botão estou usando efeito jquery para destacar e, em seguida, desaparecer a cor de todo o fundo do elemento pertencente à classe 'Boxone' e 'Boxtwo'.

Abaixo está o 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);

Todas as caixas são destacadas com a cor especificada no clique do botão .. Agora o problema é que às vezes alguns para fora dessas caixas não desaparecer. Seus restos fundo realçado. Isso acontece, por vezes, sem consistência. Eu quero um comportamento consistente.

Eu vejo que a função setTimeout () não é aplicada uniformemente a todos os elementos pertencentes a esta classe ... É apllied apenas para alguns elments ..
Que culpa eu estou fazendo?

Foi útil?

Solução

Agora eu estou usando este plugin e ele só funciona bem.

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

Outras dicas

verificar Talvez a sintaxe do código Javascript em primeiro lugar. sintaxe inconsistentes causa resultados inconsistentes em diferentes navegadores.

Você parece estar faltando algumas aspas em torno .boxOne e .boxTwo em alguns lugares. Não tenho certeza se isso era um erro de formatação ou intencional. Poderia ser causeing problemas com alguns browsers.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top