анимировать перезагруз

Question

как можно сделать эффект обновления в этом коде? кот работает, но при нажатие refresh нет эффекта и непонятно изменилась что-нибудь или нет

<a href="javascript://" id="recurl">refresh</a>

<div id="recomb">$COM_BODY$</div>

<script type="text/javascript">
  $('#recurl').click(function() {
    random = Math.floor(Math.random() * 9999);
    $.get('$REQUEST_URI$?' + random, function(data) {
      $('#recomb').html($('#recomb', data).html());
    });
  });
</script>

Answer 1

Для того чтобы увидеть эффект, его нужно добавить

для примера добавим некий css, затем в скрипте, после строчки click, добавляем наш css $('#recomb').addClass('flash');, чтоб увидеть "мерцание" на $COM_BODY$ (в конце удаляем)

Также не забудьте подключить библиотеку jQuery

$('#recurl').click(function() {
  //убираем для повторного срабатывания
  $('#recomb').removeClass('flash');
  setTimeout(function() {
    $('#recomb').addClass('flash'); //добавили
  }, 10);
  var random = Math.floor(Math.random() * 9999);
  $.get('$REQUEST_URI$?' + random, function(data) {
    $('#recomb').html($('#recomb', data).html());
    setTimeout(function() {
      $('#recomb').removeClass('flash'); //убрали
    }, 500);
  });
});

.recomb.flash {
  animation: flash 0.5s ease-in-out;
}

@keyframes flash {
  50%{color:#fff;text-shadow:0 -1px rgba(0,0,0,.3),0 0 5px #f03000,0 0 8px #f80000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<a href="javascript://" id="recurl">refresh</a>
<div id="recomb" class="recomb">$COM_BODY$</div>

анимации, можно выбрать тут, тут, тут

*я искала так "анимация мерцания css" (**но в тестовом окошке ru.SO не видно эффекта)

БЛОГ НА HUSL

анимировать перезагруз

Ответы (1 шт):