@oink

Почему блок с jQuery fadeIn сначала появляется полностью, а только потом начинает анимацию появления?

Добрый день, делаю сайт на базе Бутстрапа с подключенным jQuery 3.4.1. Воспользовался сниппетом "Back to top", чтобы сделать кнопку, которая появляется в углу страницы при перемотке вниз, и при нажатии на которую можно анимированно отмотаться наверх страницы. Немного подправил под себя, вот код:
var $toTopBlock = $("#to-top-block");
if ($(this).scrollTop() < 150) {
  $toTopBlock.hide();
}

$(window).on('scroll', function() {
  if ($(this).scrollTop() > 150) {
    $toTopBlock.fadeIn(500);
  } else {
    $toTopBlock.fadeOut(500);
  }
});

var $backToTop = $("#to-top");
$backToTop.on('click', function(e) {
  $("html, body").animate({scrollTop: 0}, 700);
});


Проблема в том, что у меня почему-то при скролле вниз сначала появляется кнопка полностью, а затем сразу же начинается анимация Fade In с заданными параметрами. Еще есть проблема с тем, что исчезает она тоже недостаточно плавно, но это не так критично в данный момент.
Очень долго гуглил, в т.ч., естественно, на английском, такое ощущение, что ни у кого такой проблемы не бывало. Из-за этого подозреваю, что может влиять что-то стороннее. Но помимо этого кода js у меня буквально 30 строчек, пробовал закомментировать - не помогло.

Вот верстка:
<div class="to-top-trigger" id="to-top-block">
    <a class="to-top-link" id="to-top"></a>
  </div>


.to-top-trigger {
  position: fixed;
  right: 20px;
  bottom: 20px;
  height: 64px;
  width: 64px;

  background-color: rgba(6, 86, 164, .8);
  border-radius: 50%;
  transition: .4s all ease;

  overflow: hidden;
  z-index: 100;
}

.to-top-trigger:hover,
.to-top-trigger:focus {
  background-color: rgba(7, 98, 187, .8);
}

.to-top-link {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;

  cursor: pointer;
}

.to-top-link::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;

  background-image: url(../img/arrow-up-circle.svg);
  background-repeat: no-repeat;
  transform: translate(-50%, -50%);
}
  • Вопрос задан
  • 38 просмотров
Решения вопроса 1
sinneren
@sinneren
Очевидно же, что дело в transition. Если вам так нужна анимашка на css, то используйте её на ином блоке. А лучше совместите с JS.
Или, если я всё таки правильно понял вашу задумку, то просто замените all на нужное свойство
transition: background-color 400ms ease;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы