Visualizzazione dei risultati da 1 a 2 su 2

Discussione: JQuery fadeIn fadeOut

  1. #1

    JQuery fadeIn fadeOut

    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>

  2. #2
    Risolto.

    E' un problema di CSS, il css che rimane sotto va messo position:absolute
    e con top:0px, altrimenti quando va in primo piano si sposta e perde l'hover.

    Ciao

    G

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.