Question

我有一个带保存按钮的表单。单击保存按钮时，它运行ajax以保存表单内容。这样可行。我遇到麻烦的是保存按钮fadein fadeout。保存按钮的文本是“另存为草稿”。单击时，我希望它淡出，将文本更改为“[时间]保存的草稿”，然后淡入以显示它已保存，以及保存的时间。几秒钟后，我希望该按钮消息淡出并被原来的“另存为草稿”按钮取代。

我认为我必须将渐变集中到函数中，但是我的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);
}););}););}););});

我没有缩进代码，因此看起来并不凌乱希望这可以帮助。干杯

JQuery FadeIn FadeOut按钮不起作用

3 个答案: