wordpress - JQuery slideup/slidedown triggering when hidden element animates -
i'm using jquery on wordpress page animate hidden element on mouseenter event. hidden element text block slides down when mouse enters div containing thumbnail of image. have animation working when hidden element slides down triggers mouseleave function slidesup elemnet giving undesirable yo yo effect. know how tell jquery ignore element slides down mouseleave function isn't called unless mouse leaves element has thumbnail. result can seen here:
http://jeremypiller.com/wordpress
any appreciated.
here's css (i'm manipulating wordpress generated classes):
.wp-caption { position:relative; width:150px; height:150px; color:#000; text-align:center; } .wp-caption img { position:absolute; width:150px; left:0px; top:0px; } .wp-caption p.wp-caption-text { font-size: 1em; line-height: 17px; width:150px; background-color:#fff; display:none; cursor:pointer; margin:0; height:100px; position:absolute; left:0px; top:0px; opacity:0.8; }
the html:
<div id="attachment_61" class="wp-caption alignnone" style="width: 160px"> <a rel="lightbox[roadtrip2]" href="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water.jpg"> <img class="size-thumbnail wp-image-61" title="enlarge_water" src="http://jeremypiller.com/wordpress/wp-content/uploads/2011/01/enlarge_water-150x150.jpg" alt="" width="150" height="150" /> </a> <p class="wp-caption-text">is wp-caption gets added?</p> </div>
and jquery:
jquery(document).ready(function(){ $(".wp-caption").each(function () { var $this = jquery(this); jquery(".wp-caption-text").hide(); jquery("img.size-thumbnail", $this).stop().mouseenter(function () { jquery(".wp-caption-text", $this).slidedown('slow'); }).mouseleave(function () { jquery(".wp-caption-text", $this).slideup('slow'); }); }); });
instead of mouseleave event, let new mouseenter event tied body. prevent event bubbling both image , text beneath. can stop bubbling event.stoppropagation() method:
Comments
Post a Comment