Adding a delay in Hover Delay

Question

I want to add a delay in the hover effect for the code below. I am very weak in jQuery.

$(".home-furniture .menu > ul > li > a").hover(function(e){
    e.preventDefault();
    $(".home-furniture .menu > ul > li > a").removeClass("active");
    $(".home-furniture .menu > ul > li > .gallery").removeClass("active");
    $(".home-furniture .menu > ul > li > div .viewer-border").css({"left":"-9999em"});
    $(this).next().find(".viewer-border").removeAttr("style");

    $(this).addClass("active");
    $(this).next().addClass("active");
});

very similar question: http://stackoverflow.com/questions/15575993/how-to-add-delay-to-jquery-mouseover — Stryner, Aug 28 '14 at 16:49
Does this answer your question? [Delay jquery hover event?](https://stackoverflow.com/questions/435732/delay-jquery-hover-event) — Goran Stoyanov, Dec 20 '19 at 19:04

score 2 · Answer 1 · answered Aug 28 '14 at 16:49

Set a timer to run your code after your desired delay. Assuming you want to cancel the action on hover out (here shown with 1000 ms delay):

        var id;
        $(".home-furniture .menu > ul > li > a").hover(function (e) {
            e.preventDefault();
            id = setTimeout(function () {
                $(".home-furniture .menu > ul > li > a").removeClass("active");
                $(".home-furniture .menu > ul > li > .gallery").removeClass("active");
                $(".home-furniture .menu > ul > li > div .viewer-border").css({ "left": "-9999em" });
                $(this).next().find(".viewer-border").removeAttr("style");
                $(this).addClass("active");
                $(this).next().addClass("active");
            }, 1000);
        },
        function (e) {
            clearTimeout(id);
        });

Hi.. I tried doing this and the entire animation stopped – Biky Aug 29 '14 at 11:35 — Biky, Aug 29 '14 at 11:35

Adding a delay in Hover Delay

1 Answers1