Вообщем у меня такой к вам вопрос. Ребят смотрите такой момент. Надо сделать так что бы в начальном положении был только красный блок, и при наведении на него, появлялся сначала серый блок(выдвигался), а потом скрытый текст путем плавного opacity.
Я сделал это путем 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 раз быстро туда сюда, то получается просто каламбур)) Как правильно решаются такие проблемы, подскажите пожалуйста) Потому что по сути простая функция анимации, а столько подводных камней, вот прошу помощи экспертов!
