CODEWITHSUNDEEP
javascriptjquery
YSbakker
YSbakker

Reputation: 707

Delaying jQuery's handlerOut

I'm using the following jQuery function:

$( selector ).hover( handlerIn, handlerOut )

Now, I want to delay the "handlerOut" part, but I can't seem to get this working. I've tried using delay() and setTimeout() but they both didn't work. I think it's a syntax thing. Here's my JS:

$(document).ready(function () {
    var menuItem2 = document.getElementById('#menu_item_2');
    var menuItem3 = document.getElementById('#menu_item_3');
    $('#menu_item_2').hover(function () {
        this.style.zIndex = "1";
        menuItem3.style.zIndex = "0";
    });

    $('#menu_item_3').hover(function () {
        this.style.zIndex = "1";
        menuItem2.style.zIndex = "0";
    }, function () {
        $(this).delay(500).style.zIndex = "0";
    });

});

HTML

<div id="menu_parent2">
            <a href="#music">
                <div class="menuItem" id="menu_item_2">
                    <h5>Music</h5>
                    <hr>
                    <p>Displays my music projects</p>
                </div>
            </a>
            <a href="#contact">
                <div class="menuItem" id="menu_item_3">
                    <h5>Contact</h5>
                    <hr>
                    <p>Displays a contact form</p>
                </div>
            </a>
        </div>

Upvotes: 0

Views: 51

Answers (1)

dvenkatsagar
dvenkatsagar

Reputation: 936

I think the you should convert it to pure Jquery like this:

$(document).ready(function () {
    $('#menu_item_2').hover(function () {
        $(this).css({"z-index":1});
        $("#menu_item_3").css({"z-index":0});
    });

    $('#menu_item_3').hover(function () {
        $(this).css({"z-index":1});
        $("#menu_item_2").css({"z-index":0});
    }, function () {
        $(this).delay(2000).css({"z-index" : 0,"background-color" : "red"});
    });
});

Try it out and see if it works.

Upvotes: 1

Related Questions