CODEWITHSUNDEEP
javascriptjquerysettimeout
meztli
meztli

Reputation: 459

setTimout on loading animation after clicking submit

I would like to have an animation funciton show for 2 seconds once the submit button is clicked. I am not sure how to put it all together using the setTimeout function

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

current code (could not put in comments) the page stays in loading and does not redirect:

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

Upvotes: 0

Views: 305

Answers (4)

Bucket
Bucket

Reputation: 7521

Set your animation as the function callback to setTimeout():

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

Or if you want to reuse your function:

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

setTimeout(startAnimation, countDown);

EDIT: Your form is not submitting because you are not evoking the submit function:

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

Upvotes: 0

public override
public override

Reputation: 982

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

Upvotes: 0

Vishkey
Vishkey

Reputation: 197

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

}

Upvotes: 0

basher
basher

Reputation: 2391

You never actually called setTimeout and never made an initial change to the UI. You should call it when submit is clicked.

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

Upvotes: 1

Related Questions