Quelli che seguono sono una serie di esempi in cui utilizzare jQuery è sconsigliato in favore dei CSS. I fogli di stile spesso ci fornisconono una soluzione altrettanto efficace e con un minor dispendio di risorse.
Modificare gli stili su :hover
La soluzione jQuery:
$('#elm').hover(
function(){ $(this).addClass('hover') },
function(){ $(this).removeClass('hover') }
)
La soluzione CSS:
#elm {
transition: all 500ms ease-in;
/* stili */
}
#elm:hover {
/* stili */
}
Assegnare stili specifici ai link che puntano a file
La soluzione jQuery:
$('a[href]').each(function() {
if((C = $(this).attr('href').match(/[.](doc|xls|pdf)$/))) {
$(this).addClass(C[1]);
}
});
La soluzione CSS:
a[href$=".pdf"] { ... }
a[href$=".doc"] { ... }
a[href$=".xls"] { ... }
Semplici animazioni
La soluzione jQuery:
$(function() {
$('#popup').fadeIn(500);
});
La soluzione CSS:
#popup {
opacity: 0;
animation: fadeIn 500ms ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Si noti che le proprietà CSS3 per le animazioni e le transizioni sono state scritte con il loro nome standard per comodità. Vanno comunque usate tramite i prefissi dei browser se necessario.