JQuery 淡入淡出按钮不起作用

JQuery FadeIn FadeOut Button Not Working

本文关键字：不起作用 按钮 淡出 淡入 JQuery      更新时间：2023-09-26

>我有一个带有保存按钮的表单。单击保存按钮时，它会运行 ajax 来保存表单内容。这行得通。我遇到的问题是保存按钮淡入淡出。保存按钮的文本是"另存为草稿"。单击时，我希望它淡出，将文本更改为"草稿在 [时间] 保存"，然后淡入以显示它已保存以及保存的时间。几秒钟后，我希望该按钮消息淡出并替换为原始的"另存为草稿"按钮。

我想我必须将淡入淡出嵌套到函数中，但我的 jquery 淡入淡出天赋很少，并且迅速淡入:)

以下是阿贾克斯的成功部分....

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

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

编辑

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

你是对的。你需要嵌套。试试这样的事情...

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

你应该这样做：

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

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

相关文章：