Ciao ragazzi, sto cercando di studiare per benino jquery, libreria che soddisfa molto l'occhio ma se non capisco cosa sto facendo mi infastidisce molto. In pratica sto cercando di capire quando ad un evento click richiamo una funzione, QUANDO questa e' terminata.
Per farmi capire meglio, ho scritto queste quattro righe di codice, un div, un button ed una gif.
Quando premo il button la div deve scorrere fino a metà pagina, il button viene sostituito da un loader.gif, e fino a qui nessun problema, tutto funziona, ma non capisco quando tutto questo e' finito.
Devo capire quando una cosa inizia e quando finisce!!
Posto il codice, mi aiutate a capire??
codice:
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test intercettare animazione</title>
 
<style>
  #p1{position: relative;}
</style>


<script type="text/javascript"  src="jscript/jquery.js" > </script>  


<script type ="text/javascript">
 
    function sposta()
    {
          $("#p1").css('background' ,'grey').css('color','white');     
        
        $("#p1").animate({
                opacity: 0.25,
                top: "+=50%",
                height: "toggle"
           }, 5000, function() {              
        });
        
        document.getElementById("button").style.display = "none";   // to undisplay
        document.getElementById("replace").style.display = "";      // to display
         
         return true;
     }


</script>




<script type="text/javascript">
 $(document.ready(function())
  {
         /*   commentato, non funziona
           $().ready(function () {
                alert("termine spostamento");    
                return true;
            });  */
 
       $('p').load(function () {
                alert("termine spostamento");    
                return true;
            });

 }
</script>




</head>


<body>
 
 <div id="p1">
     <p>div p1 </p>
 </div>
 
      
     <div id="button">
         <input type="button" value="Clicca" onClick="sposta();" />
     </div>
         
     <div id="replace" style="margin-left:30px; display:none;">
         <img src="Loader.gif" width="30" alt="loading...">..Attendi spostamento ...
     </div> 
                        
</body>
</html>