Fade In classe CSS

mi chiedo come posso svanire in una classe css con jQuery. L'effetto che sto cercando è un po 'come quello che si vede qui: https://squareup.com/Fade In classe CSS

Quello che ho provato finora è questo:

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

ho pensato sul metodo .addClass(), ma io non sono sicuro di dove aggiungerlo (o se è la cosa migliore da fare).

EDIT: Ecco un violino di qualcosa che ho provato: http://jsfiddle.net/J93NR/1/

fonte

2012-04-20 Connor

perché non basta cambiare il css –

Il sito si collega a fa questo con solo un normale fadeIn/fadeOut di elementi diversi in tempi diversi, e uno sprite CSS che assomiglia a [questo] (https://d1g145x70srn7h.cloudfront.net/static/cfcd8a7b595261bbae796910d11d44e02c02e34a/images/sprites/navigation-sf3fa60fe27.png). – adeneo

Grazie a @adeneo, se stavo usando uno sfondo di immagine userei solo sprite css come hai detto (e forse jquery .animate). Il mio background è solo un colore rgba, però. – Connor

non hai bisogno di jQuery per questo, una soluzione CSS puro è molto più semplice (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/

fonte

2012-04-21 01:06:02

-1 Questo non funziona quando si aggiunge il contenuto nel 'outer' div o' inner' div http : //jsfiddle.net/Curt/hByb8/1/ – Curt

@Curt: non è un problema, l'esempio di Square non ha alcun testo al suo interno. Nel caso del fiddle originale di OP, tuttavia, la [soluzione è ancora più semplice] (http://jsfiddle.net/ZAgnY/) –

non l'avevo notato nell'esempio OPs. 1 buona soluzione. Risposta modificata a upvote – Curt

c'è un errore di sintassi nel codice: provare questo:

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

è possibile selezionare a tag invece , passando sopra i tuoi tag li in un modo che hai lo stile aleggia al di fuori dell'area visibile del menu, prova questo:

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

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

fonte

2012-04-20 23:57:14 undefined

Nessuna fortuna ... strano. – Connor

@Connor jsfiddle la marcatura: http://www.jsfiddle.net – undefined

Forse questo illustrerà meglio: http://jsfiddle.net/VzStB/ – stealthyninja

Se si utilizza jQuery UI, c'è un'opzione per animare utilizzando la classe utilizzando switchclass()

Aggiornamento:

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

fonte

2012-04-20 23:58:38 Starx

Grazie, e vedo l'utilità di questo, ma ho bisogno di aggiungere solo la classe (con una dissolvenza), non effettuare alcuna commutazione. – Connor

@Connor, controllare l'aggiornamento – Starx

Ecco cosa ho: 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>

Di naturalmente sarebbe anche possibile ottenere ciò con CSS3 invece di jQuery. Il che è esattamente ciò che stanno facendo i ragazzi del sito web che hai collegato.

fonte

2012-04-21 00:10:08 Fleshgrinder

Fade In classe CSS

risposta

Problemi correlati