JQuery 淡入淡出按钮不起作用

Question

我有一个带有保存按钮的表单。单击“保存”按钮时，它会运行 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);
}

Answer 1

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

编辑

抱歉，它不起作用。也用 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() 发生。

Answer 2

你说得对。你需要筑巢。尝试这样的事情......

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

Answer 3

你应该这样做：

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

我没有缩进代码，所以它看起来不乱
希望这有帮助。干杯