Блог

Главная - Вопросы по программированию - Метод jQuery .fadeOut и элемент, добавляемый после загрузки DOM

Метод jQuery .fadeOut и элемент, добавляемый после загрузки DOM

#javascript #jquery #animation #fadeout #effects

Вопрос:

(Я нахожусь в учебном лагере 9 недель, поэтому я приношу извинения за потенциально рудиментарный характер этого…)

Я добавляю элемент в DOM (кнопку) в условном:

 $('.buttonsAndInputs').append(`<button id="clearHistoryButton">Clear All</button>`);

При нажатии на эту кнопку выполняется ряд функций для очистки массива и удаления некоторого другого содержимого из DOM. Я хотел бы использовать метод .fadeOut jQuery, чтобы удалить КНОПКУ.

У меня это есть в последующей функции:

 $('#clearHistoryButton').remove();

Я бы хотел:

 $('#clearHistoryButton').fadeOut(1000);

…так что он исчезает причудливым образом.

Это не работает — он просто ждет одну секунду, а затем — ПУФ — исчезает.

Это мой первый вопрос. Это сообщество сыграло ВАЖНУЮ роль в моем росте в этой сфере, и, как всегда, я очень ценю всех вас.

Комментарии:

1. Поскольку вы новый участник, пожалуйста, не забудьте отметить ответ как принятый , если вы считаете, что он решил вашу проблему. Таким образом, другие участники увидят, что ваша проблема решена, и смогут сосредоточиться на других нерешенных вопросах — спасибо

2. Я не вижу в вашем коде причины, по которой он не работал бы. jsfiddle.net/pe5wrt8q

3. Я думаю, проблема заключалась в том, что это то, что добавляется после загрузки. Я могу заставить жестко закодированные элементы исчезать. Принятый ответ сделал свое дело, но это повлияло на функциональность (на данный момент я просто не понимаю, как заставить кнопку вернуться). Спасибо!

Ответ №1:

Вы пробовали transition: opacity 1s в своем CSS ?

Преимущество:
Аппаратное ускорение (GPU), т. е. оно не беспокоит ваш основной процессор (CPU) этой задачей, в то fadeOut() время как функция jQuery основана на программном обеспечении и для этого требуются ресурсы процессора.

Шаги:

  1. Добавьте transition: opacity 1s в свои правила CSS нужный элемент кнопки
    здесь: ( #clearHistoryButton )
  2. Добавьте правило CSS с button.fadeMeOut помощью opacity: 0
  3. Добавьте простую функцию jQuery для добавления класса «.fadeMeOut» по щелчку мыши
  4. Затем снимите кнопку с setTimeout(function(){$('#clearHistoryButton').remove()},1000)

Запустите фрагмент кода

 $(function() { // Shorthand for $( document ).ready()

  $("#clearHistoryButton").on( "click", function() {
    // first: fade out the button with CSS
    $(this).addClass("fadeMeOut");

   // then: after fadeOut effect is complete, remove button from your DOM
    setTimeout(function(){
      $('#clearHistoryButton').remove();
    },1000);
  });
  
}); 
 button {
  opacity: 1;
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  transition: opacity 1s;
}

button.fadeMeOut {
  opacity: 0;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="clearHistoryButton">Press to hide me</button>
Метки: ,