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>