JQuery：淡出，執行一個動作，然後退色

所以我有什麼相當於一個HTML表單，但不是實際<form>，本身。我有一個'清除'按鈕，我正在使用它將所有字段重置爲默認值。JQuery：淡出，執行一個動作，然後退色

從審美的角度來看，我希望窗體淡出，在「消失」時重置，並在完全重置時淡入。我有了這個代碼，到目前爲止，試圖實現這一點：

function Reset() { 

    $formDiv.fadeOut(function() { 

     // perform reset actions here 
     $(this).fadeIn() 
    }); 
}

但是，什麼情況是，因爲DIV是淡出，字段得到復位，所以用戶看到他們都身體變回自己默認值在淡出時。然後一旦淡出就消失。關閉，但我不希望用戶看到重置字段。我嘗試了以下步驟，等到fadeOut完成重置字段，但我得到了一個無限循環或者其他東西（瀏覽器說腳本運行緩慢並詢問我是否想停止它）：

function Reset() { 

    $formDiv.fadeOut(function() { 

     while (!$(this).is(':animated')) { 
      // perform reset actions here 
     } 

     $(this).fadeIn() 
    }); 
}

所以我不確定從哪裏去。任何幫助，將不勝感激。謝謝。

來源

2010-01-29 Matt Powell

你不應該給一個速度參數？ – hakre 2012-08-28 10:01:59

我有同樣的問題最近與fadeOut，這似乎是不正確的工作，我爲它找到了解決方案：

$(this).animate({opacity:'0'},function(){ 

    //here changes to this element 

    $(this).animate({opacity:'1'}); 
})

它看起來一樣淡入/淡出，但它的作品如預期的變化（元素不可見）

我希望你們中的一些人會覺得它有用。

來源

2012-12-12 12:39:42 Damian

查找到.delay

更多細節：設置時間的動畫將採取淡出（）的量，並使用延遲的淡入（）動畫長於淡出動畫時間。在這個例子中，重置動作將在fadeOut動畫期間發生，並且可能不會超過600 ms。

$formDiv.fadeOut(600,function() { 

    // perform reset actions here 
    $(this).delay(650).fadeIn() 
});

編輯：哎呀，誤解了這個問題。您希望重置窗體邏輯在fadeIn（）調用上觸發，而不是fadeOut。但我認爲同步動畫事件仍然很好。嘗試像這樣：

$formDiv.fadeOut(600,function() { 
    $(this).delay(650).fadeIn(function() { 
     // perform reset actions here 
    }); 
});

來源

2010-01-29 21:52:25 ghoppe

@ghoppe，在你的編輯中仍然有一點點。將重置代碼放在fadeIn（）回調中會讓它淡入，*然後*執行重置代碼，這與我需要的相反。我需要它淡出，沒有用戶看到它重置復位，然後淡入所有重置。我認爲延遲可能會奏效，因爲其他答案中建議的速度參數不起作用。也許如果我把重置代碼的延遲比fadeOut持續時間稍長一點？但是，我不確定我會將延遲（）分配給... – 2010-01-29 22:27:25

是的，這就是爲什麼我將延遲設置爲650，將fadeOut設置爲600，我推測您的重置操作將相當快地執行。你可能不得不擺弄數字。或者，您可能需要查看setTimeout（）以觸發重置操作並同步事物。我沒有做過任何實驗... – ghoppe 2010-01-29 23:31:03

回調真的不應該在動畫完成之前觸發。你有沒有嘗試在fadeOut上設置一個速度 - 文檔（並不總是準確的）顯示它是一個必需的參數，它可能是如果你指定一個回調 - 也就是說，它可能是作爲速度如果你沒有明確提供。

$formDiv.fadeOut('fast', function() { 
    // perform reset 
    $(this).fadeIn(); 
});

編輯：通過代碼看後，它出現（在1.3.2，至少），如果你提供一個函數作爲第一個參數，它會評估它，並使用返回值作爲速度。如果你指定一個速度，那麼你的回調函數應該像你期望的那樣工作。該元素應淡出，回調將觸發並重置並淡入代碼將被執行。

來源

2010-01-29 21:57:14 tvanfosson

我曾希望它會這麼簡單，但添加「正常」作爲fadeOut（）的第一個參數仍然會得到相同的結果。當它消失時，字段被重置。我同意你的意見，回調代碼應該等到淡出完成（我一直認爲是這種情況），但這只是沒有發生。 – 2010-01-29 22:24:48

使用

jQuery.stop().fadeOut()

防止排隊的淡出動畫。通過在回調之前

.stop() can be used to prevent queueing any jQuery Animation

http://api.jquery.com/stop/

來源

2013-08-22 06:14:49 cgupta

thx它節省了我的一天:) – 2013-08-22 06:16:42

JQuery：淡出，執行一個動作，然後退色

回答

相關問題