jQuery fadeOut（）仅可使用一次

Question

我正在使用jQuery淡出我构建的“通知”气泡。 第一次调用该函数时，它会逐渐消失，但是第二次将“通知”附加到主体上，但是只是坐在那里而不会消失。 任何帮助将不胜感激。

这是被调用的Javascript。

    if (pointsCalculated = 1) {
    $('body').append('<div id="progress">' + pointsCalculated + ' point added to current points...</div>');
}
else {
    $('body').append('<div id="progress">' + pointsCalculated + ' points added to current points...</div>');
}

//Reset calculator after adding to tracker
calcReset();

    $("#progress").fadeOut(2000);

Answer 1

尝试在fadeOut之后删除元素：

$("#progress").fadeOut(2000, function() { $(this).remove(); });

更多信息：

。去掉（）
。淡出（）

Answer 2

Javascript找不到一个ID多个的元素，而当您想再次运行它时，它已经淡出。

您可以将id更改为一个类，然后找到所有可见且未设置动画的.progress来启动该项目上的淡入淡出，完成该操作后，您可以将其删除，因此不必进行太多.progress

$('body').append('<div class="progress">' + pointsCalculated + ' ' + (pointsCalculated === 1 ? 'point' : 'points') + ' added to current points...</div>');

//Reset calculator after adding to tracker
calcReset();

$(".progress:visible:not(:animated)").fadeOut(2000, function() { $(this).remove(); });

记住在javascript中，如果要查看变量是否为值，则需要至少使用两个“ =”，否则将值设置为该变量。

Answer 3

每次添加后，您都需要将fadeOut事件重新绑定到#progress元素。

Answer 4

将元素添加回DOM时，必须重新创建附加的元素fadeOut绑定。 您可以在追加之后立即创建此绑定，并且现在应该可以使用。

Answer 5

您的代码并未显示您正在删除“进度”，因此您可能每次都添加一个新代码。 由于ID非常唯一，因此您的代码将找到两个并失败。