Hover delay jquery

Question

I would like to have a site with 12 squares, each show 12 new ones when hovering, and would like to put a delay on every square so you can hover over the other without them all triggering. Any ideas? Found a few answers but quite new to jQuery and can't seem to get them to work. This is my code for now. Thanx in advance.

$(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

I recommend using the HoverIntent plugin. It will allow you to do what you're asking relatively easily. Their site has good documentation.

HoverIntent