2009-01-08 13 views
6

Tengo un DIV con un enlace y un SPAN.jQuery backgroundColor animation

Al hacer clic en el enlace, muestra una lista de elementos utilizando AJAX. Cuando se hace clic en un elemento, se cambia el contenido del SPAN.

Quiero resaltar este cambio, estableciendo el color de fondo del DIV en verde y animándolo de nuevo a blanco usando jQuery.

var originalColor = elementToUpdate.parentNode.style.backgroundColor; 
    elementToUpdate.style.backgroundColor = 'green'; //lastSender.style.color; 
    jQuery(elementToUpdate.id).animate({ backgroundColor: '#ffffff' }, 1000); 

El fondo del SPAN se cambia a verde en la 2da línea, pero la 3ra línea no hace nada. No hay errores, o cambia lo que nunca ...

¿Alguna idea?


Editar: Como se ha señalado por Ted Naleid en un comentario a continuación:

También tenga en cuenta que usted tiene que tener las animaciones de color plugin instalado para que esto funcione (http://plugins.jquery.com/project/color), si no lo tiene instalado, jQuery no puede animar colores, solo propiedades numéricas (al menos desde 1.3.1).

Respuesta

9

No necesita el .id si ya tiene el elemento. Entregar directamente a jQuery:

jQuery(elementToUpdate).animate({ backgroundColor: '#ffffff' }, 1000); 

usted no recibe un error porque elementToUpdate.id es una cadena, que jQuery (probablemente) interpreta como un selector. Simplemente resulta que es un selector que no selecciona nada.

Como alternativa, se puede decir esto para hacerle un selector válida:

jQuery('#' + elementToUpdate.id).animate({ backgroundColor: '#ffffff' }, 1000); 

pero creo que la primera forma es preferible puesto que ya tiene el elemento en sí.

+2

También tenga en cuenta que debe tener el plugin de animaciones de color instalado para que esto funcione (http://plugins.jquery.com/project/color), si no lo tiene instalado, jQuery no puede animar colores , solo propiedades numéricas (al menos a partir de 1.3.1). –

+0

Buen punto, el OP no mencionó esto, así que lo agregaré a su pregunta. –