Ciao,
volgio realizzare un semplicissimo rollover con fadeIn e fadeOut,
solo che ottengo comportamenti strani, il fadeIn funziona tranne che
quando il div "Dopo" messo a display:none quando è del tutto visibile si rinasconde
dietro al div "Prima" e non gradualmente ma con uno scatto.

Sicuramente mi scappa qualcosa...

codice:
<html>
     <head>
          <script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-latest.js"></script>
          
          <style type="text/css" media="screen">
          .cont {width:100px; height:100px; display:block; background:#fff; color:#fff; position:relative;}
          .cont .caption{display:none;}
          .a1 {width:80px; height:80px; display:block; background:#000; color:#fff;  z-index:10;}
          .a2 {width:80px; height:80px; display:block; background:#ccc; color:#fff; position:absolute; top:0px;}
          </style>

          <script type="text/javascript" language="javascript">
          $(document).ready(function(){
                $('.cont').hover(function() {$(this).find('div.caption').stop(false,true).fadeIn(900);
          },
          function(){
             $(this).find('div.caption').stop(false,true).fadeOut(900); 
         });
         });
         </script>
</head>
<body>
          <div class="cont">
                    <div class="a2">Prima</div>
                    <div class="caption">
                           Dopo
                    </div>
          </div>
</body>
</html>