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

Question

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

0

Я бы хотел, чтобы анимационное шоу показалось в течение 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;
    });
});

meztli 24 сен. 2013, в 20:12

Источник

Теги:

javascript

jquery

settimeout

4 ответа

0

//
//  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]
//

public override 24 сен. 2013, в 17:20

0

$(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);
});

}

Vishkey 24 сен. 2013, в 16:57

0

Задайте анимацию как функцию обратного вызова функции 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
});

Bucket 24 сен. 2013, в 16:33

0

Спасибо ... я вижу изображение загрузки сейчас ... однако страница не отправляется и не переопределяется, изображение loaidng остается там навсегда ... :( любая идея, почему? Вот мой текущий код:
meztli 24 сен. 2013, в 18:16
0

@ meztli посмотрите мое обновление - вы не вызывали функцию отправки. Вы должны были сказать submit() , а не submit .
Bucket 24 сен. 2013, в 18:30

Ещё вопросы

Спасибо ... я вижу изображение загрузки сейчас ... однако страница не отправляется и не переопределяется, изображение loaidng остается там навсегда ... :( любая идея, почему? Вот мой текущий код:
@ meztli посмотрите мое обновление - вы не вызывали функцию отправки. Вы должны были сказать submit() , а не submit .

basher · Accepted Answer · 2013-09-24T16-45-00.000Z

Вы никогда не называли 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
    });
  });
}

Спасибо, это прекрасно работает для анимации, но не переадресовывает на другой URL через 2 секунды: S, есть идеи, как я могу это сделать?