Vai al contenuto

Tornare in cima alle pagine con Bootstrap

Avrete notato che per mostrare/nascondere il link utilizzo la classe in  ereditata da Bootstrap, che viene rispettivamente aggiunta o tolta al link stesso: tuttavia, se avete esperienza con jQuery vi starete chiedendo come mai non abbia usato l’approccio “tradizionale” che si basa sugli effetti nativi .fadeIn() e .fadeOut().

Per la verità l’utilizzo di .fadeIn()  e .fadeOut() nel nostro esempio è perfettamente lecito, ma con una GRANDE raccomandazione:

Il link non deve avere transizioni CSS che influenzino – direttamente o indirettamente – la proprietà opacity .

In questo caso, infatti, gli effetti fade di jQuery (che agiscono proprio modificando l’opacità dell’elemento…) entreranno in conflitto con la regola CSS, dando risultati imprevedibili.

In altre parole, se avete una regola simile a questa (ad esempio perché volete che il colore cambi gradualmente durante l' hover  del link), con molta probabilità il risultato non sarà quello desiderato:

Notate che utilizzando all  la transizione riguarderà tutte le proprietà, e quindi anche opacity . Per vedere cosa accade in questo caso, ho creato un esempio su JSFiddle: giudicate voi… 😉

Naturalmente l’utilizzo combinato delle classi fade  e in  di Bootstrap previene questo problema, oltre a semplificare notevolmente il lavoro.

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.