La opacidad animada desordena mi texto

Estoy tratando de crear el siguiente efecto: cuando flotar sobre mi enlace, ese enlace cambia de color, esta parte funciona, pero el problema con mi código es que no puedo ver mi texto cuando paso el mouse sobre él. Sé que puedo resolver esto agregando imágenes a mi etiqueta span y ancla y también sé que hay un complemento que anima el color, pero SI ES POSIBLE me gustaria solucionar esto SIN imágenes de fondo y complementos. ¿Es eso posible?
Creé esto VIOLÍN para que veas mi problema.

Mi código:

$(document).ready(function () {
    $('.link').hover(function () {
        var heightCheck = $(this).outerHeight();
        //alert(heightCheck);
        $(this).stop().animate({
            opacity: 0
        }, 1000);
        $('.yellow').height(heightCheck);
        $('.yellow').css({
            'margin-top': -heightCheck
        });
    }, function (heightCheck) {
        $(this).stop().animate({
            opacity: 1
        }, 1000, function () {
            $('.yellow').css({
                'margin-top': +heightCheck
            });
        });
    });
});

preguntado el 03 de julio de 12 a las 07:07

4 Respuestas

Bueno, ya estás usando jQuery, ¿por qué no usas jQuery UI (el complemento al que haces referencia) y haces todo con un solo elemento?

Piénsalo, ¿recordarás incluir ese extra? .yellow span cada vez que quieres un enlace como ese?

Además, ¿por qué no usar la mejora progresiva y hacer todo esto con CSS? ¿Incluso podrías hacer un respaldo de jQuery para IE?

Ver mi violín adjunto.

http://jsfiddle.net/nzcGy/3/

Respondido 03 Jul 12, 08:07

+1 pero incluso mejor que hacer una verificación, es decir, sería usar modernizr y verificar animaciones css - steveax

La ventaja con este método es para Chrome, Safari y Firefox: ¡no tiene que usar ningún javascript! Y solo tenemos que usar js para el molesto IE. - jon jaques

De acuerdo, pero pensé que podría estar adelantándonos un poco :) - jon jaques

¡Ese es el efecto que estaba buscando! +1 por mi!! - Dejo Dekic

Definitivamente usaría el addClass capacidad de animación que tiene jquery ui, en lugar de animar el estilo en línea. Si usé jquery ui, eso es. - Joonas

Si entiendo lo que está tratando de lograr aquí, parece que se resolvería con una línea de CSS. p.ej..

.link:hover { background-color: yellow;}

La razón por la que no puede ver su texto es por la opacidad: 0 lo hace invisible.

Respondido 03 Jul 12, 08:07

Gracias por la respuesta!! No funcionó :( Sé que la opacidad es el problema, pero no sé cómo lograr que mi texto muestre :( - Dejo Dekic

Cámbielo para que el color de fondo gris se aplique al estilo li y no al enlace en sí. Quite la línea de opacidad animada para .link también.

¿Quizás algo como esto? http://jsfiddle.net/5bXHW/

Respondido 03 Jul 12, 08:07

Txh para responder, ¡pero parece que tendré que usar jquery UI! - Dejo Dekic

Jugué con la opacidad para obtener este resultado, se ve mucho mejor ahora http://jsfiddle.net/kyWth/37/ la opacidad del enlace y la opacidad del intervalo ahora están establecidas en 0.5. ¿Está cerca de lo que quieres?

ACTUALIZACIÓN Hizo cambios en su código aquí http://jsfiddle.net/kyWth/39/ , funciona perfecto, tampoco necesitas el lapso.

Respondido 03 Jul 12, 08:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.