Javascript JQuery FadeIn淡出按钮不工作

我有一个表单，它有一个保存按钮。单击save按钮时，它会运行ajax来保存表单内容。这很有效。我遇到的问题是保存按钮淡出淡出。保存按钮的文本为“另存为草稿”。单击时，我希望它淡出，将文本更改为“草稿在[时间]保存”，然后淡入以显示它已保存，以及保存的时间。几秒钟后，我希望该按钮消息淡出，并由原来的“另存为草稿”按钮取代

我认为我必须将淡入功能嵌套，但我的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);
}

成功：函数（数据）{
变量日期=新日期（），
小时=日期。getHours（），
分钟=date.getMinutes（）；
如果（小时>12）小时=小时-12；
如果（分钟<10）分钟='0'+分钟；
var save_draft='另存为草稿'；
var draft_saved='在'+hours+'时保存的草稿：'+minutes+''；
$（“#保存按钮”）.fadeOut（1000）；
$（“#保存按钮”）。替换为（草稿保存）；
$（“#保存按钮”）.fadeIn（1000）；
$（“#保存按钮”）.fadeOut（1000）；
$（“#保存按钮”）。替换为（保存草稿）；
$（“#保存按钮”）.fadeIn（1000）；
}

你说得对。你需要筑巢。试试这样的

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);
        });
    });
});

var date=新日期（），
小时=日期。getHours（），
分钟=date.getMinutes（）；
如果（小时>12）小时=小时-12；
如果（分钟<10）分钟='0'+分钟；
var save_draft='另存为草稿'；
var draft_saved='在'+hours+'时保存的草稿：'+minutes+''；
$（'body'）。追加（保存草稿）。；
$（“#保存按钮”）.fadeOut（1000，函数（）{
$（“#保存按钮”）。替换为（草稿保存）；
$（“#保存按钮”）.fadeIn（1000，函数（）{
$（“#保存按钮”）.fadeOut（1000，函数（）{
$（“#保存按钮”）。替换为（保存草稿）；
$（“#保存按钮”）.fadeIn（1000）；
});
});
});

您应该这样做：

$('#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);
}););}););}););});

我没有缩进代码，所以看起来不乱

---

希望这有帮助。干杯

由于每个动画都是异步的，因此需要调用回调函数中的任何其他方法

编辑

对不起，它坏了。也可使用

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（）

：

---

当您淡出某个元素时，jQuery会将

display:none

直接放到该HTML中。但是您正在用另一个HTML替换（通过

replaceWith（）

method）。但是

fadeIn（）

只淡出隐藏的元素。因此，我们需要隐藏新的HTML，然后出现

fadeIn（）

。

fadeIn/fadeOut，因为其他“动画”是异步的，所以它们几乎会同时运行。感谢您的快速回答…虽然下面的答案有效，但fadeIn不会淡入，它们只是在没有淡入的情况下弹出。淡出的作品很棒。知道如何让fadein工作吗？谢谢…工作，但fadein不会消失…他们会出现。谢谢…工作，但fadein不会消失…他们会出现。谢谢…工作，但fadein不会消失…他们会出现。@Mark，我更新了一个完整的工作代码示例，并解释了为什么需要更新。太好了…这很有意义…非常感谢！我曾尝试使用“空”和“隐藏”，但在何时何地放置这些内容时遇到了问题。再次感谢。