@newhacke

Совсем не понимаю как правильно анимировать? Что за баг?

Вообщем у меня такой к вам вопрос. Ребят смотрите такой момент. Надо сделать так что бы в начальном положении был только красный блок, и при наведении на него, появлялся сначала серый блок(выдвигался), а потом скрытый текст путем плавного opacity.

5f58050660a18323987483.png

Я сделал это путем jquery, использовал animate внутри hover. как на этом снимке. Функция простая и понятная, выложу тут ее)

тайм аут для того что бы текст появлялся после того как длина красного блока дойдет до кондиций))

Все работает все круто, НО проблема в том, что когда скролишь и при этом hover на фокусе стоит курсор, а ты проскролил, то функция считает что курсор еще там, и когда ты повторно наводишь, то функция ломается)) Видимо я костыль исполнил, подскажите как решить данную проблему)

var animateWidth = $('.button-wrp').width();   // это длина изначально красного блока))

$('.hov').hover(function (e) {                              // это сам блок по наведению на который...
      let card = $(e.target).siblings('.button-wrp')
      let result = animateWidth + 150;
      animateWidth += 150;
      $(card).animate({
        "width": result
      }, 100);

      setTimeout(() => {
        $(card).find('.btn-descr').fadeToggle('1');
      }, 400)

    }, function (e) {                                                       // это колбэк выхода из hover 
      let card = $(e.target).siblings('.button-wrp')
      let result = animateWidth - 150;
      animateWidth -= 150;
      $(card).animate({
        "width": result
      }, 100);
      $(card).find('.btn-descr').fadeToggle('1');
    });


А да, и момент такой если быстро навести курсор, и убрать то функция отрабатывает от и до. И это проблема, вот хотелось бы понять, как правильно написать условие на то, что если ширина не дошла до конечной точки, то функцию обрубать, и не показывать скрытый текст. А еще если 15 раз быстро туда сюда, то получается просто каламбур)) Как правильно решаются такие проблемы, подскажите пожалуйста) Потому что по сути простая функция анимации, а столько подводных камней, вот прошу помощи экспертов!
  • Вопрос задан
  • 73 просмотра
Решения вопроса 1
Рекомендую переписать на CSS @keyframes и описать всю анимацию от её старта и до конца. Тогда, вероятно, JS не понадобится от слова совсем (разве что классы повесить при наведении мышки), и работать будет стабильно (всё будет на стороне браузера).

https://developer.mozilla.org/en-US/docs/Web/CSS/C...

И надо бы классы сделать, но не могу найти сходу нормального примера. Идея такая же, как здесь https://docs.angularjs.org/guide/animations.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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