¿Por qué la devolución de llamada "completa" para la tercera animación ocurre primero, antes de que comience cualquier animación?

Guión:

$( "#animate" ).delay(2000).animate(
    { "width":    "500px" },
    { "duration": 3000,
      "complete": function(){ $( "#animate" ).append( "1st<br />" ); }}
)
.delay(1000).animate(
    { "width":    "200px" },
    { "duration": 3000,
      "complete": function(){ complete( "2nd" ); }}
)
.delay(1000).animate(
    { "width":    "500px" },
    { "duration": 3000,
      "complete": complete( "3rd" ) }
);

function complete( ordinal ){
    $( "#animate" ).append( ordinal + "<br />" );
};

Html:

<div id="animate" />

Css:

#animate
{
    border: 1px solid red;
    height: 200px;
    width:  200px;
}

Jsfiddle:

http://jsfiddle.net/nQftS/3/

1
ThinkingStiff 30 ago. 2011 a las 00:00

3 respuestas

La mejor respuesta

La devolución de llamada espera una función. Usted, sin embargo, no pasa una función. Usted llama a una función.

  "complete": complete( "3rd" )

Que agrega cosas como se define dentro de esa función. Luego no devuelve nada, por lo que se evalúa como:

  "complete": undefined

Tenga en cuenta que pasar una función funciona sin paréntesis. P.ej.

  "complete": complete

O

  "complete": function() { ... } // this is also a function
4
pimvdb 29 ago. 2011 a las 20:02
"complete": complete( "3rd" )

Esta línea ejecutará la función complete, pasando un parámetro de "3rd" y luego establecerá el valor devuelto de esa función en "complete".

"complete": function(){ complete( "2nd" ); }

En su lugar, esta línea establecerá "complete" en una función que, cuando se llame, ejecutará la función complete, pasando un parámetro de "2nd".

5
James Montagne 29 ago. 2011 a las 20:01

En su última parte, envuélvala en una función:

.delay(1000).animate( 
    { "width":    "500px" }, 
    { "duration": 3000,
      "complete": function(){complete( "3rd" ) }
    }
);

Si no hace esto, la función se llama inmediatamente, lo que no es lo que deseaba.

0
Peter Mortensen 26 nov. 2016 a las 16:24