Fade In CSS class

Me pregunto cómo puedo desvanecerme en una clase css con jquery. El efecto que estoy buscando es algo así como lo que se ve aquí: https://squareup.com/Fade In CSS class

Lo que he probado hasta ahora es la siguiente:

$(document).ready(function() { 
    $('.mini-nav li').hover(function() { 
    $('.hover').fadeIn(slow); 
}; 
});

pensé en el método .addClass(), pero No estoy seguro de dónde agregarlo (o si eso es lo mejor que se puede hacer).

EDIT: Aquí es un violín de algo que he intentado: http://jsfiddle.net/J93NR/1/

Fuente

2012-04-20 Connor

¿por qué no cambiar el css –

El sitio que está vinculando a hace esto con solo un fadeIn/fadeOut regular de diferentes elementos en diferentes momentos, y un sprite css que se parece a [esto] (https://d1g145x70srn7h.cloudfront.net/static/cfcd8a7b595261bbae796910d11d44e02c02e34a/images/sprites/navigation-sf3fa60fe27.png). – adeneo

Gracias @adeneo, si estuviera usando un fondo de imagen solo usaría css sprites como usted mencionó (y quizás jquery .animate). Mi fondo es solo un color rgba, sin embargo. – Connor

que no es necesario jQuery para esto, una solución CSS puro es mucho más simple (fiddle):

<div class="outer"><div class="inner"></div></div> 

.outer { 
    background: url(...); 
} 
.inner { 
    background: url(...); 
    opacity: 1; 
    transition: opacity 0.3s; 
} 
.inner:hover { 
    opacity: 0; 
}

http://jsfiddle.net/ZAgnY/

Fuente

2012-04-21 01:06:02

-1 Esto no funciona al agregar contenido en el div 'externo' o en el http' inner' : //jsfiddle.net/Curt/hByb8/1/ – Curt

@Curt: no es un problema, el ejemplo de Square no tiene ningún texto dentro. Sin embargo, en el caso del violín original de OP, la [solución es aún más simple] (http://jsfiddle.net/ZAgnY/) –

No lo había notado en el ejemplo de OP. +1 buena solución. Respuesta editada al voto – Curt

hay un error de sintaxis en el código: intente lo siguiente:

$(document).ready(function() { 
    $('.mini-nav li').mouseenter(function() { 
    $('.hover').fadeIn("slow"); 
    }); 
});

puede seleccionar a etiquetas en vez , al pasar el cursor sobre sus etiquetas de li de una manera que tenga el estilo que se encuentra fuera del área visible del menú, intente esto:

http://jsfiddle.net/J93NR/3/

http://jsfiddle.net/J93NR/4/

Fuente

2012-04-20 23:57:14 undefined

Sin suerte ... extraño. – Connor

@Connor jsfiddle el marcado: http://www.jsfiddle.net – undefined

Quizás esto lo ilustrará mejor: http://jsfiddle.net/VzStB/ – stealthyninja

Si está utilizando jQuery UI, hay una opción para animar el uso de la clase utilizando switchclass()

Actualización:

$("element").addClass("classname").fadeIn("slow");

Fuente

2012-04-20 23:58:38 Starx

Gracias, y veo la utilidad de esto, pero necesito simplemente agregar la clase (con un fundido), no hacer ningún cambio. – Connor

@Connor, verifique la actualización – Starx

Esto es lo que tengo: http://jsfiddle.net/J93NR/1/ – Connor

<style type="text/css"> 
#leaf,#leaf:before{background:url(sprite.png)} 
#leaf{position:relative} 
#leaf:before{content:'\0020';position:absolute;top:0;left:0;display:none} 
</style> 

<!-- more html --> 

<ul id="menu"> 
    <li id="leaf"><a href="#">Link</a></li> 
</ul> 

<!-- more html --> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('.min-nav li').hover({ 
    // Handler in 
    function() { 
     $("#leaf:before").fadeIn("slow"); 
    }, 
    // Handler out 
    function() { 
     $("#leaf:before").fadeOut("slow"); 
    } 
    }); 
}); 
</script>

De Por supuesto, también sería posible lograr esto con CSS3 en lugar de jQuery. Que es exactamente lo que están haciendo los chicos del sitio web que vinculó.

Fuente

2012-04-21 00:10:08 Fleshgrinder

Fade In CSS class

Respuesta

Cuestiones relacionadas