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;
    });
});
4

4 回答 4

1

您从未真正调用过 setTimeout，也从未对 UI 进行过初始更改。您应该在单击提交时调用它。

$(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
    });
  });
}
于 2013-09-24T18:12:45.333 回答
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]
//
于 2013-09-24T18:21:28.517 回答
0

将您的动画设置为函数回调setTimeout()：

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

或者，如果您想重用您的功能：

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

setTimeout(startAnimation, countDown);

编辑：您的表单未提交，因为您没有调用该submit功能：

$(".btn-submit").on("click", function () {
    $("form").submit(); // <-- open and closed paren
});
于 2013-09-24T18:08:14.720 回答
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);
});

}
于 2013-09-24T18:13:15.670 回答