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:

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>
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..

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>