jQuery hover in function -
my script works fine without $this, when delete $this, on hover script display submenus. explain me make mistake?
$(function () { var timeoutid; $(".mainmenu li").hover(function () { if (!timeoutid) { timeoutid = window.settimeout(function () { timeoutid = null; $(this).find('.submenu').slidedown('slow'); }, 1500); } }, function () { if (timeoutid) { window.cleartimeout(timeoutid); timeoutid = null; } else { $(".submenu").slideup('slow'); } }); });
my html:
<div id="a"> <ul class="mainmenu"> <li> cars <ul class="submenu"> <li><a href="#">white</a></li> <li><a href="#">black</a></li> <li><a href="#">red</a></li> <li><a href="#">silver</a></li> <li><a href="#">yellow</a></li> <li><a href="#">other</a></li> </ul> </li> <li> tires <ul class="submenu"> <li><a href="#">14"</a></li> <li><a href="#">15"</a></li> <li><a href="#">16"</a></li> <li><a href="#">17"</a></li> <li><a href="#">18"</a></li> </ul> </li> </div>
.mainmenu has more 2 submenus.
it's untested shot in dark, think you're loosing element context in hover function using context of timeout function.
use self
variable store element , use after timeout expired.
$(function () { var timeoutid; $(".mainmenu li").hover(function () { // store context var self = this; if (!timeoutid) { timeoutid = window.settimeout(function () { timeoutid = null; // represents context of timeout function // we're using stored context here $(self).find('.submenu').slidedown('slow'); }, 1500); } }, function () { if (timeoutid) { window.cleartimeout(timeoutid); timeoutid = null; } else { $(".submenu").slideup('slow'); } }); });
Comments
Post a Comment