Delaying jQuery's handlerOut

Question

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>

I think it should be $(this).delay(500).css({"z-index" : 0}). And this if you are planning on using jquery, then dont mix it with pure javascript. — dvenkatsagar
– dvenkatsagar, Commented Feb 1, 2016 at 19:51
@dvenkatsagar Added html, the #menu_item_2 gets slided over #menu_item_3 using css, which is why I want to change the z-index. — YSbakker
– YSbakker, Commented Feb 1, 2016 at 19:57

dvenkatsagar · Accepted Answer · 2016-02-01 20:09:21Z

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.

Thank you, that did the trick. But aren't the css() properties supposed to be in quotation marks? So "z-index" : 0? If I don't use quotation marks it doesn't get executed properly.
But consider this as well, you might want to use queue if it gives you problems(as @Andrew Brooke suggested).

Collectives™ on Stack Overflow

Delaying jQuery's handlerOut

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related