javascript - Reenable hover with on() -
i have container show/hide depending on link clicked.
the flow:
- click menu button , shows container 2 seconds timer fades
- click link within container , keeps container fading
- click menu button again , allows container fade again
oddly, after last step, if hover mouseleave container doesn't fade. i've tried. have feeling i'm not calling on() right.
i've tried using within $('.menu-control').on('click') allow mouseleave again assume need define it.
$('#module-container').on('mouseleave'); i've tried few other ways including wrapping entire hover within function, naming , calling when menu button clicked. no success.
this implemented when video playing background, "options" show after clicking menu button , fade stay out of way. link within container stop video, fade , options stay on page.
you cannot re-enable event handlers that. when use .off() removes specified event handlers element. if want re-register handlers need pass handler reference again .on() method.
since need use handler reference multiple times, prefer write independent function can referred multiple places
you need write like
$('.menu-control').on('click', function() { $('#module-container').fadein(300); window.mtimer = settimeout(function(){ $('#module-container').fadeout(300); }, time); //the following commented line doesn't work. want reallow mousleave function, defined below (marked here) $('#module-container').on('mouseleave', mouseenter); }); function mouseenter(){ cleartimeout(window.mtimer); } function mouseleave(){ window.mtimer = settimeout(function(){ $('#module-container').fadeout(300); }, time); } var time = 2000; $('#module-container').on({ mouseenter: mouseenter, //here mouseleave: mouseleave }); $('.stopme').on('click', function(e) { $('#module-container').show().off('mouseleave'); e.preventdefault(); });
Comments
Post a Comment