Как решить баг со всплывающим окном?

Question

[jmspacy]

Если наводить мышь на объекты man поочередно, выждав пока pop-up пропадет - всё работает, конфликтов не возникает. Но, если не ждать пока пропадет один pop-up и сразу навести на следующий man - pop-up от первого объекта остается висеть. Задача состоит в том, что бы вне зависимости друг от друга pop-up могли всплывать и исчезать бесконфликтно. Заранее спасибо за помощь.

let timeout,
    id;
$(".man").mouseenter(function() {
    id = $(this).attr('data-id');
    $('.pop-up-' + id).fadeIn(400);
})
$(".man").mouseleave(function() {
    id = $(this).attr('data-id');
    timeout = setTimeout(function() {
        $('.pop-up-' + id).fadeOut(400);
    }, 2000);
})
$(".pop-up-" + id).mouseenter(function() {
    clearTimeout(timeout);
})
$(".pop-up-" + id).mouseleave(function() {
    $(this).fadeOut(400);
})

Answer 1

[shmatuan]

$(".man").mouseenter(function() {
$(".pop-up-" + id).fadeOut(400); // Добавить это
clearTimeout(timeout); // Добавить это
    id = $(this).attr('data-id');
    $('.pop-up-' + id).fadeIn(400);

})

Comments

[jmspacy]

не помогает (
тема открыта

[shmatuan]

jmspacy, Немного залип, простите - забыл написать что бы ещё и fadeOut его) Обновил, попробуйте так
Если не получится, то лучше отрезок кода вставьте в https://codepen.io/pen/ - будет легче отлаживать другим