События Mouse jQuery mouseenter mouseleave

Question

Не могу разобраться почему не корректно отрабатывает событие. Если курсором навести медленно на элемент, то все работает хорошо, если быстро, событие mouseleave не срабатывает, пробовал пробрасывать две функции в функцию jQuery .hover('fun1', 'fun2') но это не дало нужного результата

Js

// Buttons
            $('.btn').mouseenter( function() {
                let that = this;
                $(this).addClass('hover_0');
                setTimeout(function() {
                    $(that).addClass('hover_1');
                }, 25);
                setTimeout(function() {
                    $(that).addClass('hover_2');
                }, 75);
                setTimeout(function() {
                    $(that).addClass('hover_3');
                }, 175);
            });
            $('.btn').mouseleave( function() {
                let that = this;
                $(that).removeClass('hover_3 hover_2 hover_1 hover_0');
            });

Sass

.btn-normal
        font-style: normal
        font-weight: 500
        font-size: 20px
        line-height: 23px
        border-radius: $radius_button_normal
        height: 55px
        min-width: 185px

        &::before
            top: 110px

        &.hover_0
            &::before
                top: 55px

        &.hover_1
            &::before
                top: 0

        &.hover_2
            &::before
                height: 185px
                width: 92.5px

        &.hover_3
            &::before
                // width: 185px
                width: 230px

Pug

button.btn.btn-normal.btn-orange.btn-material.btn_long(type="button")
    span.btn-material-effect.js-ripple
        i.btn-material__circle
    span.btn-name
        | Register Free

Answer 1

Чтобы проверить срабатывает ли событие, можно, например, вывести что-нибудь в консоль в обработчике данного события.

Разница между медленно навести быстро заключается во времени. Поскольку при наведении мыши вы добалавяете классы с таймаутом, то очевидно, классы добавляются не сразу. Если за время этого таймаута вы успеваете убрать мышь из области элемента, то получится, что mouseleave сработает раньше, чем классы будут добавлены. Иными словами, они будут добавлены после того, как вы уберете мышь.

Чтобы этого избежать, вам потребуется запомнить хэндлеры таймаутов, и очистить их когда убираете мышь. а-ля h1 = setTimeout(...) и clearTimeout(h1)

Естественно, если таких элементов более одного, то глобальные переменные для сохранения таймаутов не подойдут, и лучше сохранять куда-нибудь в data атрибуты самого элемента.

БЛОГ НА HUSL

События Mouse jQuery mouseenter mouseleave

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