Question

我正在使用jQuery在mouseenter / mouseout事件中从外部div显示/隐藏内部div。每个外部div的内部div的数量不同，并且在顺序setTimeout调用的帮助下，一个序列显示多个内部div：例如setTimeout（showImages，200），setTimeout（showImages，400），setTimeout（showImages，600）等。用于隐藏图像的方法相同。

显示/隐藏部分效果很好，但是问题是，当在外部div之间切换的时间间隔太短时，脚本会掉线：隐藏顺序停止，内部div被冻结，内部div从另一个显示外部div。如果“切换”发生在同一外部div上（迅速将鼠标移开并移回div），则会显示内部div，然后立即将其隐藏。

如果前一个外部div的内部div具有“ .hidden”类，我尝试使用setTimeout延迟内部div的“显示”，但没有成功：该延迟独立于内部div具有上课或否只是延迟显示功能。

对不起，但实际的解决方案因挫败感而消失了，哈哈，所以我不能在这里包括它。

我也尝试过使用承诺，但是我对承诺并不了解，但失败了。虽然，我认为解决方案与它们有关。

很抱歉，这是我的第一个问题，因此，您可能发现下面的某些内容完全没有必要，但是，我认为这些是最相关的部分：

const showImagesInSequence = () => {

    switch (storyBoxes.eq(i).attr("id")) {
        case storyBoxes.eq(0).attr("id"):
            showImages();
            setTimeout(showImages, 200);
            setTimeout(showImages, 400);

            break;
        case storyBoxes.eq(1).attr("id"):
            showImages();
            setTimeout(showImages, 200);

            break;
        case storyBoxes.eq(2).attr("id"):
            showImages();

            break;
        default:

            break;
    }
}

const hideImagesInSequence = () => {
    hideImages();
    setTimeout(hideImages, 200);
    setTimeout(hideImages, 400);
    setTimeout(() => {
        storyBoxes.eq(i).children(".story-image").hide();
    }, 1050);
}


// Show and hide story images
$(document).ready(() => {
    storyBoxes.on("mouseenter", () => {
        for (let j = 0; j < storyBoxes.length; j += 1) {
            let mouseWentIntoBox = event.target.id === storyBoxes.eq(j).attr("id");
            let mouseCameFromPage = $(event.relatedTarget).attr("data-anchor") === "secondPage";

            if (mouseCameFromPage && mouseWentIntoBox) {
                i = j;
                showImagesInSequence();
            }
        }
    })

    storyBoxes.on("mouseout", () => { 
        for (let j = 0; j < storyBoxes.length; j += 1) {
            let mouseWentOutOfBox = event.target.id === storyBoxes.eq(j).attr("id");
            let mouseWentIntoImage = getIDs(storyBoxes.eq(j).children(".story-image")).includes(event.target.id);
            let mouseWentOutOfElementIntoImage = getIDs(storyBoxes.eq(j).children(".story-image")).includes(event.relatedTarget.id);
            let mouseWentOutOfElementIntoBox = event.relatedTarget.id === storyBoxes.eq(j).attr("id");

            if (mouseWentOutOfBox && mouseWentOutOfElementIntoImage) {

                break;
            } else if (mouseWentOutOfBox || mouseWentIntoImage) { 

                if (mouseWentOutOfElementIntoImage && mouseWentIntoImage) {

                    break;
                } else if (mouseWentIntoImage && mouseWentOutOfElementIntoBox) {

                    break;
                } else {
                    // Hide images
                    i = j;
                    reversedImage = storyBoxes.eq(i).children(".story-image").length - 1; 
                    hideImagesInSequence();
                }
            }
        }
    })
})

本质上，我正在寻找一种解决方案，仅在隐藏前一个内部div时才在页面上显示其他外部div的内部div。

控制台中没有错误。

只有隐藏了另一个div的图像后，才能显示一个div的图像？

0 个答案: