jquery come intercettare il termine di un toggle.

**marcopa** · 12-02-2015, 20:40

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>

**KillerWorm** · 12-02-2015, 22:02

Ciao, nel caso della funzione animate puoi specificare opzionalmente una funzione di callback che viene richiamata, appunto, al completamento dell'animazione.

Sul tuo esempio hai indicato tale funzione ma non hai inserito nulla al suo interno. Dovrai agire li dentro:

codice:

$("#p1").animate({
    opacity: 0.25,
    top: "+=50%",
    height: "toggle"
  }, 5000, function(){alert("L'animazione finisce qui")}
);

**cavicchiandrea** · 12-02-2015, 22:24

Nel animate la function(){...} finale è il callback

**marcopa** · 12-02-2015, 22:36

Grazie ragazzi, quindi qualsiasi intervento anche un successivo script lo posso gestire, ok ho capito, ma non capisco perche'
questa parte, non "sente" e non mi da' nemmeno l'alert, come se non esistesse, ma perche'?

codice:

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

 }
</script>

**KillerWorm** · 12-02-2015, 23:27

Stai mischiando un po' le cose.
Una cosa è la funzione animate in cui puoi specificare il callback che viene richiamato alla fine dell'animazione, mentre un'altra cosa sono i metodi ready e load che non c'entrano niente con l'animazione (non ho capito se questo ti è chiaro). Sostanzialmente fanno riferimento a degli eventi.
Ora la domanda è "sai a cosa servono questi due metodi e quando vengono innescati i relativi eventi?"
Prova a darti una risposta, fai attenzione a dove hai posto quei due metodi, e probabilmente arrivi a capire perché le due funzioni non vengono richiamate.

Discussione: jquery come intercettare il termine di un toggle.

Strumenti discussione

Ricerca discussione

Visualizza

jquery come intercettare il termine di un toggle.

Permessi di invio