setTimout при загрузке анимации после нажатия submit

Question

Я бы хотел, чтобы анимационное funciton show было нажато 2 секунды после нажатия кнопки отправки. Я не знаю, как поставить все это вместе с использованием функции SetTimeout

$(window).ready(function() { 
"use strict"; 
var countdown = 2000; 
setTimeout(function()){ 
var startAnimation = function() {//this is what I need to animate for 2 seconds 
    $(".normal-actions").hide(); 
    $(".execute-actions").show(); 
}; 

$("form").attr("action", "url"); 
$(".btn-submit").on("click", function() { 
    $("form").submit; 
}); 
}); 
} 

текущего кода (не мог положить в комментариях) страница остается в загрузке и не перенаправляет:

$(window).ready(function() { 
    "use strict"; 

    var countDown = 2000; 
    setTimeout(function(){ 
     $(".normal-actions").hide(); 
     $(".execute-actions").show(); 
    }, countDown); 

    $("form").attr("action", "url"); 
    $(".btn-submit").on("click", function() { 
     $("form").submit; 
    }); 
}); 

Answer 1

Вы никогда не называли SetTimeout и никогда не сделали первоначальное изменение в пользовательский интерфейс. Вы должны позвонить ему, когда нажата кнопка.

$(window).ready(function() { 
    "use strict"; 
    var countdown = 2000; 

    var toggleAnimation = function() {//this is what I need to animate for 2 seconds 
     $(".normal-actions").toggle(); //toggles between show/hide 
     $(".execute-actions").toggle(); 
    }; 

    $("form").attr("action", "url"); 
    $(".btn-submit").on("click", function() { 
     $("form").submit; 
     toggleAnimation(); //first call start animation to change the UI 
     setTimeout(toggleAnimation, countdown); //then call startAnimation again after 2 seconds to change it back 
    }); 
    }); 
} 

Answer 2

Установить анимацию в качестве функции обратного вызова setTimeout():

setTimeout(function(){ 
    $(".normal-actions").hide(); 
    $(".execute-actions").show(); 
}, countDown); 

Или, если вы хотите использовать вашу функцию:

var startAnimation = function() { 
    $(".normal-actions").hide(); 
    $(".execute-actions").show(); 
}; 

setTimeout(startAnimation, countDown); 

EDIT: Ваша форма не подают, потому что вы не вызывая функции submit:

$(".btn-submit").on("click", function() { 
    $("form").submit(); // <-- open and closed paren 
}); 

Answer 3

$(window).ready(function() { 
"use strict"; 
var countdown = 2000; 

$("form").attr("action", "url"); 
$(".btn-submit").on("click", function() { 
    //When the button is clicked change class to indicate that the process started 
    $(".normal-actions").hide(); 
    $(".execute-actions").show(); 
    $("form").submit; 
    //2 seconds later revert the changes in the classes 
    setTimeout(function() { 
     $(".normal-actions").show(); 
     $(".execute-actions").hide(); 
    }, 2000); 
}); 

} 

Answer 4

// 
// give this a go: 
// 
function wait(function_, time_out_in_ms) { 
    return function() { 
     var args = Array.prototype.slice.call(arguments), 
      target = this; 
     setTimeout(
      function() { 
       return function_.apply(target, args); 
      }, 
      time_out_in_ms 
     ); 
     return this; 
    }; 
} 
// 
// use: 
// 
    var 
     fn1 = wait(
       function() { console.log(this, arguments); }, 
       3000 
      ); 

    fn1.call(document, { info : "stuff" }); 
    fn1(1,2); 
// 
// 
// Document & Window <-- returned imidiately 
// 
//  ... logged after 3 sec: 
// Document [Object { info="stuff"}] 
// Window [1, 2] 
//