How to unbind mouseleave on click using jquery -
i have div when mouseenter previews image being shown - when mouseleave hides again.
what i'm trying achieve when click div animates , shows, i'd unbind 'mouseleave' functionality image stays on screen isn't working - mouseleave still kicking in.... can help?
here's code
$('.attachment').on({ mouseenter: function (e) { tileid = (this.parentnode.id).substring(13); $('#imagecontainer-' + tileid).css('visibility', 'visible'); $('#imagecontainer-' + tileid).css('overflow-y', 'hidden'); $('#imagecontainer-' + tileid).stop().animate({ height: 40 }, { duration: 300, easing: animationeasing, queue: false }); }, mouseleave: function (e) { $('#imagecontainer-' + tileid).stop().animate({ height: 0 }, { duration: 300, easing: animationeasing, queue: false, complete: function () { $('#imagecontainer-' + tileid).css('visibility', 'collapse'); } }); }, click: function () { $('#attachmentlink-' + tileid).unbind('mouseleave'); $('#imagecontainer-' + tileid).stop().animate({ height: 610 }, { duration: 300, easing: animationeasing, queue: false, complete: function () { $('#imagecontainer-' + tileid).css('overflow-y', 'auto'); } }); } });
html code reference:
<div id="timelinecontainer"> <div id="timelinetophider"></div> <div id="timelinebottomhider"></div> <ul class="timeline"> <li id="timelineli-1"> <div class="timelineicon letter"></div> <div class="datecontainer"> <p> 12th july 2013<br> 17:13 </p> </div> <div class="timelinetile" id="timelinetile-1"> <a href="javascript:animatetile('1');" class="filldiv"></a> <div class="tiletitlecontainer" id="tiletitlecontainer-1"> <span title="this long title test application of text ellipsis , should concatenate string">test title</span> </div> <div class="details" id="details-1"> <table> <tr> <td>name:</td> <td>full name</td> </tr> <tr> <td>type:</td> <td>credit</td> </tr> </table> </div> <div class="arrow" id="arrow-1"></div> <div class="attachment" id="attachmentlink-1"></div> <div class="slideupinfo" id="slideupinfo-1"> <p> name<br> info<br> 12th july 2013, 17:13 </p> </div> <div class="iconcontainer hidden"> <a href="javascript:toggleimagecontainer(1);" id="iconcontainerlink-1"> <img src="images/attachment.png" /></a> </div> <div class="imagecontainer hidden" id="imagecontainer-1"> <img src="images/documents/1.png" /> </div> </div> </li> </ul> </div>
you need use off
:
$("#id").click(function(){ $("#id").off("mouseleave"); });
Comments
Post a Comment