jQuery se desvanecen en el color de fondo

Question

Estoy tratando de desvanecerme en el color de fondo de una fila de la tabla, y no puedo hacerlo bien. El fade-in ocurrirá cuando se haga clic en un botón.

he intentado algo así como:

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

Y aunque esto se aplicará el color de la fila de la tabla, que no se apague, pero aplicarlo a la vez.

Estoy seguro de que esto es algo simple, pero no puedo encontrar una respuesta a eso. He buscado todo en este sitio web, pero todavía no tengo suerte para esta cosa específica.

Gracias de antemano

Answer 1

El jQuery pura no tiene funcionalidad para animar colores. Debe usar jQueryUI o jQuery color plugin.

Luego use la función .animate().

Answer 2

Desafortunadamente no es posible a desvanecerse en el color de fondo (no sé acerca de la última versión de jQuery). Sin embargo, usted puede utilizar este plugin para tal fin:

highlightFade

Ahora le toca a usted si usted usar ese plugin o no por sólo fondo efecto de desvanecimiento :)

Answer 3

Peter Peller es puntual, si todavía no está empleando jquery UI, entonces al menos vaya con el jQuery color plugin.

A continuación se muestra un fragmento de código que Azoté-up que tenía éxito a través de una variedad de navegadores:

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

Como alternativa, es posible que desee colorear el fondo a su color original en primer lugar, a continuación, animar a el nuevo color

para que esto suceda, basta con sustituir el bloque animado actual con algo como esto:

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

Answer 4

¿Qué pasa con jQuery efecto de relieve, como esto:

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

También puede especificar el color y la duración debe ser hightlighted. Puede obtener más información en jquery site.