Я бы хотел, чтобы анимационное шоу показалось в течение 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;
});
});
Вы никогда не называли 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
});
});
}
//
// 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]
//
$(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);
});
}
Задайте анимацию как функцию обратного вызова функции 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
});
submit()
, а не submit
.