Salve a tutti, dal titolo non si capisce bene, in pratica io ho il codice qua sotto che ho preso da questo sito e modificato per le mie esigenze:
Il mio problema è che quando si passa con il mouse sopra il riquadro arancione e lo si toglie immediatamente, prima viene effettuato fino alla fine l'effetto fadeIn e poi viene effettuato l'effetto fadeOut dell'immagine, io invece avrei bisogno che se si passa con il mouse sopra il riquadro arancione e lo si toglie immediatamente, l'effetto fadeIn si deve interrompere anche se non è stato completato e quindi deve essere eseguito l'effetto fadeOut... Altrimenti se si passa sopra il riquadro arancione tante volte, l'immagine inizia a comparire e scomparire..codice HTML:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Fade-in jQuery</title> <script src="js/jquery-1.4.2.min.js"></script> <style media="screen"> #img{display:none} #over{ width:378px; height:517px; background-color:orange; } </style> </head> <body> <div id="over"> <img src="img/patata.jpg" alt="" name="patata" width="378" height="517" id="img" style="" /></div> <script type="text/javascript"> $('#over').mouseover(function() { $('#img').fadeIn('slow'); }); $('#over').mouseleave(function() { $('#img').fadeOut('slow'); }); </script> </body> </html>
io ho provato a risolvere il problema scrivendo in questo modo il codice JV, solo che in questo modo l'immagine non compare per niente...
codice HTML:<script type="text/javascript"> $('#over').mouseover(function() { $('#img').stop().fadeIn('slow'); }); $('#over').mouseleave(function() { $('#img').stop().fadeOut('slow') ;}); </script>
Rispondi quotando
proprio ciò che cercavo!
