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>
Rispondi quotando