不是首先在元素的第二个动画上调用 promise 函数？

Question

我正在使用 phonegap 创建一个应用程序，我正在使用 jquery 验证表单客户端。 任何错误都会下拉并“覆盖”最顶部的状态栏，就像没有连接时 snapchat 所做的那样。

为此，我在调用错误时隐藏状态栏，错误向下滑动并在向上滑动之前显示 3 秒。 我想使用promise函数等到错误滑起来再显示状态栏，但我所能管理的就是隐藏状态栏并在错误滑下后直接再次显示状态栏。

代码（J-查询）：

 function check_password() {

  var password_length = $("#password_box").val().length;

  if (password_length < 5) {
    StatusBar.hide();
    $("#error_password").html("Password must be greater than 5 characters");
    $("#error_password").slideDown();
    $("#password_box").addClass('red_border');

    $(function() {
          setTimeout(function() {
          $("#error_password").slideUp('fast')
           }, 3000);

    });

    error_password = true;

  } else{
    $("#error_password").hide();
  }
 }

css：

.error {
    position: fixed;
    color: white;
    background-color:#a50d2e;
    top:0;
    left: 0;
    width: 100%;
    height: 3%;
    text-align: center;
    padding-top: 1%;

}

Answer 1

以下是使用slideDown完成回调的示例：

$("#error_password").slideDown(function() {
    // This function runs when the slideDown is complete
});

Another way is with .promise() , which has the added benefit of running after all of the matching elements have completed their animation (worthwhile when the selector matches more than one element):

$("#error_password").slideDown().promise().then(function() {
    // This function runs when the slideDown is complete
});

Answer 2

这不是完美的或最好的方法，但它是一个简短的解决方案，可能会在某些情况下帮助某些人。

如果有人有一种“正确”的方式来实际使用 slideUp 部分的承诺，它仍然会受到赞赏。

我所做的只是在第一个函数下方使用了一个 setTimeOut 函数，它在调用动画时将动画延迟了一定的时间。

我将它延迟了 3200 毫秒而不是 3000 毫秒，因为这给了 SlideUp 时间来完成，并且状态栏看起来像是一直隐藏在错误后面。

查询：

setTimeout(function(){
      StatusBar.show();
}, 3200);