jquery - How do I prevent a mouseenter function from triggering until a mouseleave function is done? -
first, can't provide fiddle because chrome console returning "undefined not function" million times , there's no way stop it. using macrabbit espresso, , there doesn't seem issue function working written in console:
$(function() { $('.sponsored_ad').on("mouseenter", function() { $(this).animate({ opacity: 1.0 }, 500, function(){ $('.info_div', this).show("slide", { direction: "down" },500); }); }); $('.sponsored_ad').on("mouseleave", function() { $(this).animate({ opacity: 0.70 }, 500, function(){ $('.info_div', this).hide("slide", { direction: "down" }, 100); }); }); }); this html:
<div id="ad_container"> <div class="sponsored_ad"><img src="blackad.png" alt="" /> <div class="info_div">hello, name greg</div></div> <div class="sponsored_ad"><img src="redad.png" alt="" /> <div class="info_div">hello, name brad</div></div> <div class="sponsored_ad"><img src="bluead.png" alt="" /> <div class="info_div">hello, name linda</div></div> <div class="sponsored_ad"><img src="greenad.png" alt="" /> <div class="info_div">hello, name jason</div></div> <div class="sponsored_ad"><img src="blackad.png" alt="" /> <div class="info_div">hello, name kathleen</div></div> <div class="sponsored_ad"><img src="redad.png" alt="" /> <div class="info_div">hello, name percy</div></div> <div class="sponsored_ad"><img src="bluead.png" alt="" /> <div class="info_div">hello, name bruce</div></div> <div class="sponsored_ad"><img src="greenad.png" alt="" /> <div class="info_div">hello, name john</div></div> </div> and css:
#ad_container{ width: 620px; /*text-align: justify;*/ } .sponsored_ad { height: 195px; width: 195px; display: inline-block; text-align: left; vertical-align: top; margin-bottom: 3px; position: relative; } .info_div { width:195px; height:195px; background-color:#4a4a4a; color:#fff; text-align:center; opacity:0.95; filter:alpha(opacity=95); position:absolute; bottom:0px; display:none; } my first problem don't want set off mouseenter trigger until cursor has come rest on div class "sponsored_ad". second problem, related first, don't want mousenter event trigger until recent mouseout event finished.
wrapping mouseenter code in settimeout function stopped mouseout event firing @ all.
i tried refactor using hoverintent, using code git site exactly, did not work (also, reason beyond me, $(this) refrenced entire document though should have referenced $('sponsored_ad')
obviously know enough jquery dangerous. @ appreciated.
Comments
Post a Comment