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

Popular posts from this blog

shopping cart - Page redirect not working PHP -

php - How to modify a menu to show sub-menus -

python - Installing PyDev in eclipse is failed -