3

Есть блок. При его наведении, в нём же, появляется скрытый блок с функционалом. Для отображения я использую slideDown/Up в JQuery. Код JS:

$('li.block').hover(function () {
    $(this).find('div.info-block').slideDown();
}, function () {
    $(this).find('div.info-block').slideUp();
});

И я заметил такую штуку. Если часто наводить и отводить курсор с блока то то что ещё не выполнилось, а именно slideDown/Up будут выполнятся столько раз сколько мы навели. Пример, для пояснения - навожу и убираю быстро 10 раз. Потом убираю курсор и пока этот блок не сделает slideDown/Up 10 раз он не остановится.

Вопрос. как такое можно поправить?

2
  • Попробуйте задать временную задержку для повторений: например, код активируется при каждом наведении, но не чаще чем раз в 100 мс (примерно).
    – aleks.andr
    28 мая 2016 в 14:44
  • @aleks.andr делать при помощи setTimeout? не совсем понимаю как такое сделать... не могли бы пример привести?
    – Tsyklop
    28 мая 2016 в 14:47

2 ответа 2

1

остановите предыдущую анимацию, перед началом новой

$('li.block').hover(function () {
$(this).find('div.info-block').stop().slideDown();
}, function () {
$(this).find('div.info-block').stop().slideUp();
});
0

Вариант 2:

Я попробовал сделать это при помощи mouseenter и mouseleave и вот что получилось:

$('li.block').mouseenter(function () {

    var info-block = $(this).find('div.info-block');

    if(info-block.hasClass('slide-up')) {
        info-block.addClass('no-trans').slideDown(100);
    }

    setTimeout(function () {
        info-block.removeClass('slide-up').addClass('slide-down');
    }, 50);

});

$('li.block').mouseleave(function () {

    var info-block= $(this).find('div.info-block');

    if(info-block.hasClass('slide-down')) {
        info-block.slideUp(100);

        setTimeout(function () {
            info-block.removeClass('slide-down').addClass('slide-up');
        }, 50);
    }

});

НО. это тоже работает не очень корректно. Если быстро провести по блоку то скрытый блок появится и не пропадёт. Остаётся решить это.. вопрос как...

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.