Acceder a imagen de fondo con jquery

[JulioGaGarcia]

Hola, tengo un menú horizontal hecho con listas li. El elemento li tiene una imagen de fondo, y dentro del li tengo los enlaces.

Código HTML:

<div id="cuadroMenu">
        <ul>
            <li style="margin-left:16px;">
                <a href="index.asp">Quién soy</a>
            </li>
            <li>
                <a href="index.asp">Mis principios</a>
            </li>
            <li>
                <a href="index.asp">Cómo trabajo</a>
            </li>
            <li>
                <a href="index.asp">Guía de servicios</a>
            </li>
            <li>
                <a href="index.asp">Soluciones</a>
            </li>
        </ul>
    </div>
 

Cuando paso el raton por encima le aplico un efecto mediante jquery

Código Javascript:

$('#cuadroMenu li').hover(function() {
                $(this).fadeTo("slow", 1);
            },
                function() {
                    $(this).fadeTo("Slow", 0.4)
                }
            );
 

El caso es que tambien me desvanece el texto del enlace y tan solo quiero desvanecer la imagen. He probado de muchas maneras y buscado, pero no encuentro como acceder a la imagen de fondo del li.

A ver si alguien me puede ayudar. Gracias anticipadas.

[mayid]

fijate con .animate()

http://snook.ca/archives/javascript/...ge-animations/

http://api.jquery.com/animate/

[JulioGaGarcia]

Gracias, mayid. No me valen para lo que busco, pero son muy buenos los links. Me los guardo en favoritos para otra... ;D

[mayid]

Y por que no? Con .animate() podes variar la transparencia del fondo.

Quizás lo que te está pasando es que las transparencias son jerarquicas, y por ende el texto toma la transparencia del contenedor. Pero con animate va bien, creo:

http://stackoverflow.com/questions/6...rent-in-jquery

O así?
http://www.mightymeta.co.uk/animatin...hild-elements/

[JulioGaGarcia]

Hola, exactamente eso era lo que pasa, por eso concretamente lo que necesitaba era si había alguna manera de acceder a la propiedad background-image para desvanecer sólo la imagen de fondo sin implicar al texto y que éste quedara siempre con el mismo color, sin desvanecerse. Tanto con fadeTo como con animate modifica la transparencia del li, afectando a todos elementos que contiene.

[tredio]

que paso ya resolviste tu problema?, creo que era mas facil simplemente solo aplicar el fade a el texto del enlace.

Código Javascript:

$('#cuadroMenu li a').hover(function() {
                $(this).fadeTo("slow", 1);
            },
                function() {
                    $(this).fadeTo("Slow", 0.4)
                }
            );
 

[mayid]

El no quiere desvanecer el texto.

Proba con sprites. Hacete una imagen original con la misma imagen a .4 de transparencia (lo haces con cualquier programa que soporte png). Luego, con animate, haces la transición entre una imagen y otra, tal como te muestran los tutoriales que te pasé. Eso va a quedar bien.

[JulioGaGarcia]

Hola, gracias por vuestro interés. Como dice mayid, lo único que quiero desvanecer es la imagen, y esto es imprescindible. Haciendo algunas pruebas he descubierto algunas curiosidades de cómo trabaja jquey con css. Por ejemplo, si cambio la propidedad de transparencia del enlace de la manera siguiente

$('#cuadroMenu li a').fadeTo(0,1);

intentando devolver la opacidad del enlace a 1 no funciona, ya que el enlace <a> mantiene la transparencia de 1, no heredándola, sino que todo el li lo aplica sobre sí mismo, funcionando exactamente igual que una capa.

El problema lo he resuelto parcialmente añadiendo una línea en la función, cambiando la propiedad css del color del texto. Para ello utilizo dos colores: uno cuando el ratón está encima y otro color cuando está en reposo. Digo parcialmente porque los dos colores no quedan exactamente iguales cuando se le aplica la transparencia, pero creo que podré conseguirlo facilmente con el ColorZilla, complemento de Firefox, imprescindible, por supuesto ;D

De esta manera si en cualquier momento decido cambiar las transparencias mediante código, no necesitaré retocar con el PhotoShop las imágenes. De todos modos es una muy buena sugerencia.

Muchas gracias por la colaboración. Invito a unas cervecillas (virtuales).