i have jquery script running on list that, on hover, toggles container div's child elements. problem every time hover on element, script queue's toggle.
this isn't inherently problem, found annoying when move around page many times , have watch effect bug out toggling trying catch number of hovers. want know if there way stop effect when hover released. not sure have tried putting .stop() in front of .toggle() script. works extent glitchy effective.
why animation queue , how can override it?
here code:
html:
<div class="categorytext"> <li> <span><u>peripheral steroid injection</u></span></li> <div class="categorizedtext"> <ul class="hoverlist"><li>trigger point injection</li> <li>carpel tunnel injection</li> <li>tendon sheath injection</li> <li>tendon insertion site injection</li> <li>joint injection</li> <li>bursa injection</li> </ul> </div> </div> jquery:
<script type="text/javascript"> $(document).ready(function() { $(".categorytext").hover(function () { $(this).find(".categorizedtext").slidetoggle(800); }); }); </script>
you can use .stop() stop previous hover animation.
checkout snippet more information
$(document).ready(function() { $(".categorytext").hover(function () { $(this).find(".categorizedtext").stop().slidetoggle(800); }); });.categorizedtext{ display:none; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div class="categorytext"> <li> <span><u>peripheral steroid injection</u></span></li> <div class="categorizedtext"> <ul class="hoverlist"><li>trigger point injection</li> <li>carpel tunnel injection</li> <li>tendon sheath injection</li> <li>tendon insertion site injection</li> <li>joint injection</li> <li>bursa injection</li> </ul> </div> </div>
Comments
Post a Comment