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淡入淡出按钮不起作用

回答

相关问题