jquery ✁ effetto fade hover sulle immagini
☼ O inabili al maneggio dell'html: in tempi remoti si era usi ricorrere, per ottenere un effetto fade hover sulle immagini, al rinomato valore "opacity" nel .css, con risultanze di molto rigide/scattose.
Tramite la libreria jQuery è al coevo possibile ottenere dissolvenze morbide assai.
✁ È possibile scaricare lo .zip ➤ contenente l'esempio illustrato nel tutorial.
demo | posizionate il mouse sull'immagine
✁ html
<a href="#">
<img src="percorso-img/nome-img.jpg" class="fade" />
</a>
✁ javascript
<script type="text/javascript">
<!--
$(document).ready(function(){
// valore iniziale del fade sull'immagine a riposo
$(".fade").fadeTo(0, 0.2);
$(".fade").hover(function(){
// valore del fade sull'immagine con mouse hover
$(this).fadeTo("slow", 0.4);
},function(){
// ritorno al valore iniziale del fade con mouse out
$(this).fadeTo("slow", 0.2);
});
});
-->
</script>
✁ libreria jQuery
<script type="text/javascript" src="percorso-script/jquery.js"></script>
☼ rammentate di richiamare la libreria jQuery all'interno dell'head
specifiche & download del tutorial
Il valore "slow" può essere rimpiazzato da "normal", "fast" o da millesimi di secondo, al pari dell'opacità (da 0.1 a 1.0), a vostro piacimento.
✁ scaricate lo .zip ➤ contenente l'esempio illustrato nel tutorial.
commenti ✁