У меня есть куча информации, которая отображается под каждым продуктом, но если я наведу на них курсор мыши очень быстро, все будут скользить вверх и вниз, и это выглядит не очень хорошо, это большой беспорядок.

Я хотел бы сделать так, чтобы jQuery дождался завершения анимации slideDown, прежде чем запускать slideUp one.

Мой код jQuery:

    $('.title').on('mouseenter', event => {
    $(event.currentTarget).siblings().slideDown();
});
$('.box').on('mouseleave', event => {
    $(event.currentTarget).children('.info').slideUp();
}); 

Заранее спасибо,

0
J. Betanzos 14 Мар 2018 в 17:02

1 ответ

Лучший ответ

Спасибо @clav

С плагином hoverIntent и выполняем:

$('.box').hoverIntent(mouseInTriger, mouseOutTriger);

function mouseInTriger() {
    $(this).children('.info').slideDown();
}
function mouseOutTriger() {
    $(this).children('.info').slideUp();
}

Сейчас все работает нормально.

0
J. Betanzos 14 Мар 2018 в 23:00