悬停延迟jquery

Question

我希望有一个有12个正方形的网站，每个正方形在悬停时显示12个新的正方形，并希望在每个正方形上设置一个延迟，这样你就可以在不触发它们的情况下悬停在另一个正方形上。有什么想法吗？找到了一些答案，但对jQuery来说是全新的，似乎无法让它们发挥作用。这是我现在的代码。提前Thanx。

$（document）.ready（function）｛

    $(".photo1").mouseenter(
        function(e){
            $(".photo1").fadeOut(500);
            $(".photo2").fadeOut(500);
            $(".photo3").fadeOut(500);
            $(".photo4").fadeOut(500);
            $(".photo5").fadeOut(500);
            $(".photo6").fadeOut(500);
            $(".photo7").fadeOut(500);
            $(".photo8").fadeOut(500);
            $(".photo9").fadeOut(500);
            $(".photo10").fadeOut(500);
            $(".photo11").fadeOut(500);
            $(".photo12").fadeOut(500);
            $(".photo1a").fadeIn(500);
            $(".photo1b").fadeIn(500);
            $(".photo1c").fadeIn(500);
            $(".photo1d").fadeIn(500);
            $(".photo1e").fadeIn(500);
            $(".photo1f").fadeIn(500);
            $(".photo1g").fadeIn(500);
            $(".photo1h").fadeIn(500);
            $(".photo1i").fadeIn(500);
            $(".photo1j").fadeIn(500);
            $(".photo1k").fadeIn(500);
            $(".photo1l").fadeIn(500);
            $(".portraits").fadeIn();





        }
        );
            $(".photo1a").mouseleave(
        function(e){
            $(".photo1").fadeIn(500);
            $(".photo2").fadeIn(500);
            $(".photo3").fadeIn(500);
            $(".photo4").fadeIn(500);
            $(".photo5").fadeIn(500);
            $(".photo6").fadeIn(500);
            $(".photo7").fadeIn(500);
            $(".photo8").fadeIn(500);
            $(".photo9").fadeIn(500);
            $(".photo10").fadeIn(500);
            $(".photo11").fadeIn(500);
            $(".photo12").fadeIn(500);
            $(".photo1a").fadeOut(500);
            $(".photo1b").fadeOut(500);
            $(".photo1c").fadeOut(500);
            $(".photo1d").fadeOut(500);
            $(".photo1e").fadeOut(500);
            $(".photo1f").fadeOut(500);
            $(".photo1g").fadeOut(500);
            $(".photo1h").fadeOut(500);
            $(".photo1i").fadeOut(500);
            $(".photo1j").fadeOut(500);
            $(".photo1k").fadeOut(500);
            $(".photo1l").fadeOut(500);
            $(".portraits").fadeOut();




        }
        );

Answer 1

我建议使用HoverContent插件。这将使你能够相对轻松地完成你的要求。他们的网站有很好的文档。

悬停内容