Jquery et fadein

Bonjour,

Je me suis un peu amusé a combiné le css3 et le fade in du jquery ca donne des trucs sympas.

Par exemple :
html :

<script type="text/javascript" src="ressources/java/jquery.js"></script>
<script type="text/javascript" src="ressources/java/fade.js"></script>
<link rel="stylesheet" type="text/css" href="ressources/style.css">

<div id="search" class="sch">
<p>ca c est un bloc qui est content</p>
<p>wouhou</p>
</div>

css :

#search{
width : 340px;
text-align: center;
-moz-border-radius: 50px; 
-webkit-border-radius: 50px; 
border-radius: 50px;         
-webkit-border-top-left-radius: 20px; /* pour Chrome */ 
-webkit-border-top-right-radius: 20px; /* pour Chrome */ 	
}

#search:hover{
-moz-box-shadow: 0px 10px 20px #555; 
-webkit-box-shadow: 0px 10px 20px #555; 
}

et le java fade.js :

$(document).ready(function(){
$(".sch").fadeTo("slow", 0.3);
$(".sch").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});

Bon il y a 2 problèmes :

-le fade ne s'applique au search:hover, donc des qu'on retire la souris l'ombre ca disparait sans fade... c est moche. Quand la souris arrive dessus ca va, mais quand on l'enlève :s......

-Au chargement de la page, le fade n'est pas activer, le bloc div est visible a 100%.

Si vous avez quelques astuces ? ^^

Cordialement,
fxta