JQuery淡入淡出按鈕不起作用

我有一個有保存按鈕的窗體。當點擊保存按鈕時，它會運行ajax來保存表單內容。這樣可行。我遇到的麻煩是保存按鈕淡入淡出。保存按鈕的文本是「另存爲草稿」。點擊時，我希望它淡出，將文本更改爲「草稿在[時間]保存」，然後淡入以顯示它已保存，並保存它的時間。幾秒鐘後，我希望該按鈕消息淡出，並由原始「另存爲草稿」按鈕取代。JQuery淡入淡出按鈕不起作用

我想我不得不窩淡入功能，但我的jQuery褪色人才是最小的，並且迅速衰落:)

下面是AJAX的成功一部分....

success: function(data) { 
    var date = new Date(), 
    hours = date.getHours(), 
    minutes = date.getMinutes(); 

    if (hours > 12) hours = hours - 12; 
    if (minutes < 10) minutes = '0' + minutes; 

    var save_draft = '<div id="save-button" class="button-clone">Save as Draft</div>'; 
    var draft_saved = '<div id="save-button" class="button-clone">Draft Saved at ' + hours + ':' + minutes + '</div>'; 

    $('#save-button').fadeOut(1000); 
    $('#save-button').replaceWith(draft_saved); 
    $('#save-button').fadeIn(1000); 
    $('#save-button').fadeOut(1000); 
    $('#save-button').replaceWith(save_draft); 
    $('#save-button').fadeIn(1000); 
}

來源

2011-05-07 Mark

fadeIn/fadeOut，因爲其他'動畫'是異步的，所以它們幾乎同時運行。 – morgar 2011-05-07 16:18:06

感謝您的快速回答......雖然下面的答案可以奏效，但fadein不會淡入，它們只是在不退色的情況下彈出。淡出的工作很棒。任何想法如何讓fadein的工作？ – Mark 2011-05-07 16:58:26

由於每個動畫都是異步的，因此您需要調用回調函數中的任何其他方法。

編輯

對不起，這是行不通的。調整與fadeIn太：

$('#save-button').fadeOut("slow", function() { 
    $('#save-button').replaceWith(draft_saved); 
    $('#save-button').hide().fadeIn(1000, function() { 
     $('#save-button').fadeOut(1000, function() { 
      $('#save-button').replaceWith(save_draft); 
      $('#save-button').hide().fadeIn(1000); 
     }); 
    }); 
});

讓我解釋爲何正需要這種hide()是：

當你fadeOut一些元素，使jQuery的直接display: none到HTML。但是你正在用另一個HTML取代（通過replaceWith()方法）。但是fadeIn()只會淡化隱藏的元素。所以，我們需要隱藏新的HTML，然後發生fadeIn()。

來源

2011-05-07 16:31:09

謝謝...作品，但淡入淡出的不要褪色..他們流行。 – Mark 2011-05-07 17:00:04

@Mark，我更新了一個完整的工作代碼示例，並解釋了爲什麼需要更新。 – 2011-05-07 17:28:38

完美......這很有道理......非常感謝！我試圖使用空的和隱藏的，但在何時何地放置所有這些東西時遇到了麻煩。再次感謝。 – Mark 2011-05-07 17:56:31

你是對的。你需要築巢。嘗試這樣的事情......

var date = new Date(), 
hours = date.getHours(), 
minutes = date.getMinutes(); 

if (hours > 12) hours = hours - 12; 
if (minutes < 10) minutes = '0' + minutes; 

var save_draft = '<div id="save-button" class="button-clone">Save as Draft</div>'; 
var draft_saved = '<div id="save-button" class="button-clone">Draft Saved at ' + hours + ':' + minutes + '</div>'; 

$('body').append(save_draft).; 

$('#save-button').fadeOut(1000,function(){ 
    $('#save-button').replaceWith(draft_saved); 
    $('#save-button').fadeIn(1000,function(){ 
     $('#save-button').fadeOut(1000, function(){ 
      $('#save-button').replaceWith(save_draft); 
      $('#save-button').fadeIn(1000); 
     }); 
    }); 
});

來源

2011-05-07 16:12:57 Dutchie432

謝謝...作品，但fadein的不褪色..他們流行。 – Mark 2011-05-07 16:59:45

你應該這樣做：

$('#save-button').fadeOut(1000, function(){ 
$('#save-button').replaceWith(draft_saved, function(){ 
$('#save-button').fadeIn(1000, function(){ 
$('#save-button').fadeOut(1000, function(){ 
$('#save-button').fadeIn(1000); 
}););}););}););});

我沒有縮進的代碼，因此不會顯得凌亂希望這有助於。歡呼

來源

2011-05-07 16:17:55

謝謝...作品，但fadein的不褪色..他們流行。 – Mark 2011-05-07 16:59:51

JQuery淡入淡出按鈕不起作用

回答

相關問題