@aftar

Как добиться постоянной работы setTimeout?

Здравствуйте! Есть код
//-Каталог
    $(".jet-box-effect-8, .jet-box-effect-7").each( function(index, element) {
        var catalogItem = $(this);
        var catalogButton = $(this).find(".catalog__front-price-order");

        catalogButton.click(function(){
            catalogItem.addClass('flipped');
            catalogItemActive();
        });

        function catalogItemActive () {
            setTimeout(function () {    
                if (!(catalogItem.is(':hover'))) {  //-Если курсор вне элемента убрать класс
                    catalogItem.removeClass('flipped');
                }
                else {                              //-Если курсор на элементе, убрать класс после того, как будет вне его
                    catalogItem.mouseout(function () {
                        $(this).removeClass('flipped');
                    });
                }
                console.log('test')
            }, 1000);
        }
    });


При срабатывания условия else setTimeout перестает работать
https://codepen.io/anon/pen/zQjKrm
  • Вопрос задан
  • 116 просмотров
Решения вопроса 1
@forspamonly2
вы добавляете обработчики событий и не убираете их. у вас срабатывает оставшийся с прошлого раза mouseout. верните setTimeout и поменяйте catalogItem.mouseout(function () { на catalogItem.one('mouseout', function () {

но вообще так делать не надо. если я правильно понял вашу логику, её можно сделать на простом цсс, повесив перевёрнутое состояние на :hover и :active и добавив анимацию переворота обратно с нужной вам задержкой
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
joeberetta
@joeberetta Куратор тега JavaScript
Читай: https://epdf.pub/google-for-dummies.html
Замените setTimeout на setInterval
Ответ написан
Ваш ответ на вопрос

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

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