不是第一個元素的第二個動畫的調用promise函數？

我正在用phonegap創建一個應用程序，我正在驗證使用jquery的表單客戶端。如果沒有連接，任何錯誤都會下降並像'snapchat'一樣'覆蓋'頂部的狀態欄。不是第一個元素的第二個動畫的調用promise函數？

爲此，我在調用錯誤時隱藏狀態欄，錯誤向下滑動並顯示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%; 

}

來源

2016-10-03 Corey Child

爲什麼你不只是有一個叫做showError的var，默認是true。然後在你的函數開始時，如果（！showError）返回; showError = false;然後在你上一頁之後，設置showError = true; – Keith

'slideDown'和'slideUp'都有回調，並且都返回延遲，如果您向我們展示錯誤滑落後顯示此狀態欄的位置，也許我們可以幫助您 – adeneo

我會將這些框的CSS代碼在代碼中。驗證的工作方式是默認隱藏的，直到有人輸入某個內容並將其'重新輸入到輸入框中，然後檢查它是否有效。如果不是，則顯示錯誤消息 –

下面是一個使用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 
});

來源

2016-10-03 08:04:38 doug65536

你是真正的MVP –

它並不完美或做它的最好的方式，但它是一個簡短的修復，並可能有助於一些某些人場景。

如果有人對slideUp部分實際使用承諾有一個「適當」的方式，它仍然值得讚賞。

我所做的只是在第一個函數下面使用一個setTimeOut函數，該函數會在動畫被調用時將動畫延遲一段時間。

我將它延遲了3200ms而不是3000ms，因爲這樣可以使slideUp時間完成，並且狀態欄看起來像它始終隱藏在錯誤的後面。

的jQuery：

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

來源

2016-10-03 07:53:56

不是第一個元素的第二個動畫的調用promise函數？

回答

相關問題