Un approfondimento
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:
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:
|
1 2 3 |
a { transition: all .5s; } |
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.