Animate.css問題與jQuery單擊事件

我想在我使用jQuery構建的表單上應用字段驗證。我也使用animate.css來應用不同的動畫類。Animate.css問題與jQuery單擊事件

假設我有一個電子郵件字段，用戶點擊提交併檢查他們輸入的電子郵件是否有效。如果不是，則將shake動畫應用於輸入字段。

的代碼，我到目前爲止有：

$submit.click(function(event) { 
    event.preventDefault(); 
    var email = $input.val(); 

    // This does not seem to ever fire. 
    $input.removeClass('shake'); 

    if (!method.validateEmail(email) || $.trim(email) == '') { 
    $input.addClass('shake'); 
    return; 
    } 

    $form.submit(); 
});

此作品首次在用戶提交表單。但是，任何後續點擊都不會重現動搖動畫。我試圖在檢查電子郵件是否有效之前嘗試應用removeClass（'shake'），但似乎並沒有發生。

我想出來的另一種方法是設置一個2000ms的間隔來檢查輸入字段是否有一個動搖類，如果是的話就將其刪除，但這是錯誤的，因爲用戶可以提交表單300ms在間隔結束之前，導致動畫僅持續該剩餘時間量。該區間的代碼是：

setInterval(function() { 
    if ($input.hasClass('shake')) { 
    $input.removeClass('shake'); 
    } 
}, 2000);

小提琴可以在http://jsfiddle.net/9Zs9T/1/

任何想法如何有形式搖無效輸入每一個提交可以找到？謝謝。

來源

2014-02-21 mousesports

你可以請一個jsfiddle嗎？ –

http://jsfiddle.net/9Zs9T/ – mousesports

我忘了'搖動'動畫......貼在這裏：http://jsfiddle.net/9Zs9T/1/ – mousesports

您的代碼

$submit.click(function(event) { //...

發送一個單擊事件到$提交選擇。據推測，你想做的事是當用戶在動畫的最後點擊

$submit.on("click", function(event) { //...

來源

2014-02-21 20:28:59

很確定點擊和點擊是一樣的，沒有？ on（'click'）'是click函數調用的內容。我試過了，沒有解決我的問題。 – mousesports

對不起，你是對的。 –

火災事件的單擊事件中刪除類，而不是執行的功能。

$input.one('webkitAnimationEnd mozAnimationEnd 
    MSAnimationEnd oanimationend animationend', $(this).removeclass('shake'));

我還沒有測試，但我認爲它會工作。

編輯

好吧，我認爲現在是固定不變的。 Try this.

$("#form-email").on('animationend webkitAnimationEnd oAnimationEnd', 
    function(){$('#form-email').removeClass("shake");});

'one'只會觸發一次，因此我將其更改爲'on'。

來源

2014-02-21 20:47:50

不幸的是，它沒有:(你有一個輕微的語法錯誤...應該是'removeClass'。 – mousesports

我已經將解決方案添加到你的小提琴中，看它是否有效。 –

Animate.css問題與jQuery單擊事件

回答

相關問題