Question

我正在使用phonegap创建一个应用程序，我正在使用jquery验证表单客户端。任何错误都会下降并且会覆盖＆＃39;当没有连接时，像Snapchat这样的最顶部的状态栏。

要执行此操作，我在调用错误时隐藏状态栏，错误会向下滑动并在向上滑动前显示3秒。我想使用promise函数等待，直到错误再次显示状态栏，但我可以管理的是隐藏状态栏并在错误滑下后再次显示状态栏。

代码（J-query）：

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

另一种方法是.promise()，它具有在所有匹配元素完成动画后运行的额外好处（当选择器匹配多个元素时值得）：

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

Answer 2

它不是完美的或者是最好的方式，但这只是一个简短的修复，在某些情况下可能对某些人有所帮助。

如果有人有正确的＆＃39;实际上在slideUp部分使用promise的方法仍然可以理解。

我所做的就是在第一个函数下方使用setTimeOut函数，该函数会在动画调用时将动画延迟一段时间。

我将它延迟了3200ms而不是3000ms，因为这使得slideUp时间完成，状态栏看起来就像是一直隐藏在错误的后面。

jquery的：

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

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

2 个答案: