jQuery dissolvenza in background

Question

Sto provando a dissolvere il colore di sfondo di una riga della tabella e non riesco a farlo bene. La dissolvenza si verifica quando si fa clic su un pulsante.

ho provato qualcosa di simile:

$("#row_2").fadeIn('slow').css('background', 'gold') 

E anche se questo si applica il colore alla riga della tabella, che non si esaurirà, ma applicarla in una sola volta.

Sono sicuro che questa è una cosa semplice, ma non riesco a trovare una risposta. Ho guardato dappertutto in questo sito, ma ancora senza fortuna per questa cosa specifica.

Grazie in anticipo

Answer 1

La pura jQuery non ha funzionalità per animare i colori. Devi usare jQueryUI o jQuery color plugin.

Quindi utilizzare la funzione .animate().

Answer 2

Purtroppo non è possibile a sbiadire il colore di sfondo (non so circa l'ultima versione di jQuery). Tuttavia è possibile utilizzare questo plugin per quello scopo:

highlightFade

Ora tocca a te decidere se utilizzare tale plug-in o non solo per effetto di sfondo dissolvenza :)

Answer 3

Peter Peller è azzeccato, se non si sta già utilizzando jquery UI, quindi almeno andare con il jQuery color plugin.

Qui di seguito è un frammento di codice che ho sbattuto-up che ha avuto successo in una varietà di browser:

<a href="#" ID="fadeTable" title="click to fade col1">Click to fade Column 1</a> 
<table width="400px" border="1" cellspacing="0" cellpadding="1" 
         summary="This is my test table"> 
    <caption align="top"> 
    My Caption 
    </caption> 
    <tr> 
    <th scope="col" class="row0 col1" >Col 1</th><th scope="col">Col 2</th> 
    </tr> 
    <tr> 
    <td class="row1 col1" >one</td><td>Uno</td> 
    </tr> 
    <tr> 
    <td class="row2 col1" >two</td><td>Dos</td> 
    </tr> 
</table> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
    // requires http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js 
    var iAniSpeed = 2000; 
    var sBgColor = 'gold'; 
    $('#fadeTable').click(function(){ 
     $('td.col1').animate({ backgroundColor: sBgColor }, iAniSpeed); 
     return false;  
    }); 
}); 
</script> 

Come alternativa, si può decidere di colorare lo sfondo al suo colore originale prima, poi animare a il nuovo colore

per realizzare questo obiettivo, basta sostituire il blocco animato corrente con qualcosa di simile:

$('td.col1').animate({ backgroundColor: 'white' }, 250, function() 
     { 
     $(this).animate({ backgroundColor: 'gold' }, 2000); 
     } 
); 

Answer 4

Che dire jquery effetto di evidenziazione, in questo modo:

$("div").click(function() { 
     $(this).effect("highlight", {}, 3000); 
}); 

Inoltre è possibile specificare il colore e la durata dovrebbe essere evidenziato Puoi saperne di più dal jquery site.