Activar función luego de que la animación termine

[Jot3to]

Estimado, tengo el siguiente código en mi sitio (es un smooth scroll):

Código:

<script>
// Funcion que hace scroll automatico hasta la parte superior del formulario
// Como el header es fixed, resto la altura de ese header
function scrollToForm(){
    jQuery("a[href='#nav']").click();
    jQuery('html, body').animate({
          scrollTop: (jQuery("h2:contains('Contáctanos ahora')").offset().top - (jQuery(".cg-menu-below").height() + jQuery("#contactolink .wpb_wrapper h2").height() + 20))
      }, 2000);
    jQuery("input[name='nombre']").focus();
}
jQuery(document).ready(function () {
  //Cambio el link de los elementos de menu que contienen [email protected] y numero de celular
  jQuery(".cg-wp-menu-wrapper a:contains('[email protected]'), .cg-wp-menu-wrapper a:contains('+569')").attr("href","javascript:scrollToForm()");

});
</script>

Funciona perfecto, pero el focus, es decir posicionarse en el input del formulario lo realiza inmediatamente se activa la función y necesito que se termine la animación.

Ejemplo: Le doy clic al menú contacto, la página genera la animación, baja, y una vez abajo realiza el focus al formulario de contacto.

¿Alguna ayuda? :(

[dardosmania]

Código Javascript:

<script>
// Funcion que hace scroll automatico hasta la parte superior del formulario
// Como el header es fixed, resto la altura de ese header
function scrollToForm(){
    jQuery("a[href='#nav']").click();
    jQuery('html, body').animate({
          scrollTop: (jQuery("h2:contains('Contáctanos ahora')").offset().top - (jQuery(".cg-menu-below").height() + jQuery("#contactolink .wpb_wrapper h2").height() + 20))
      }, 2000);
    setTimeout(function(){
            jQuery("input[name='nombre']").focus();
    }, 2000)
}
jQuery(document).ready(function () {
  //Cambio el link de los elementos de menu que contienen [email][email protected][/email] y numero de celular
  jQuery(".cg-wp-menu-wrapper a:contains('[email protected]'), .cg-wp-menu-wrapper a:contains('+569')").attr("href","javascript:scrollToForm()");
 
});
</script>
 

[Jot3to]

Muchas gracias dardosmania, funciona perfecto. Si no es mucha molestia ¿me podrías explicar que hiciste? :( Agradezco mucho el código, pero me gustaría aprender :( :(

[Alexis88]

Básicamente retardó el inicio de la acción durante 2000 milésimas de segundo que es lo que dura la animación. Otra forma más eficiente de hacerlo es utilizando una función de llamada de retorno como tercer argumento del método .animate():

Código Javascript:

jQuery('html, body').animate({
    scrollTop: (jQuery("h2:contains('Contáctanos ahora')").offset().top - (jQuery(".cg-menu-below").height() + jQuery("#contactolink .wpb_wrapper h2").height() + 20))
}, 2000, function(){
    jQuery("input[name='nombre']").focus();
});
 

Siempre lee el manual oficial.