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

Подробнее:

.remove ()
.fadeOut ()

Answer 2

Javascript не может найти более одного элемента с идентификатором, и он уже исчезает, когда вы захотите запустить его снова.

вы можете изменить идентификатор на класс, а затем найти все .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

Ваш код не показывает УДАЛЕНИЕ «прогресса», поэтому вы, вероятно, каждый раз добавляете новый. Поскольку идентификаторы очень уникальны, ваш код находит два и завершается ошибкой.

Answer 4

Вы должны воссоздать привязку добавленных элементов fadeOut при добавлении элемента обратно в DOM. Вы можете создать эту привязку сразу после добавления, и теперь она должна работать.

Answer 5

Вам необходимо привязывать событие fadeOut к элементу #progress каждый раз, когда оно добавляется.