javascript - jQuery .toggle stacking styles -
i have problem i'm using .toggle slide elements , down, problem when try move cursor on items gets messed up. id of element removed , custom styling assigned jquery.
<div class="ui-effects-wrapper" style="font-size: 100%; border: none; margin: 0px; padding: 0px; width: 160px; height: 60px; float: none; position: relative; z-index: auto; top: -50px; left: auto; bottom: auto; right: auto; overflow: hidden; display: block; background: transparent;">novi test</div> how fix this? i've tried using .stop doesn't solve problem. i've tried reducing animation time problem persists.
.js code
$(document).ready(function(){ $('.journal-entry').hover(function(){ var name = $(this).attr('name'); $(this).find('div').stop() $(this).find('div').toggle("slide", { direction: "down" }, 200).html(name); }, function(){ $(this).find('div').stop(); $(this).find('div').toggle("slide", { direction: "down" }, 200); }); }); html
<li class="col-md-3 journal-entry" name="name of img"> <a href="#"> <img class="journal-img" src="imgsrc"> <div id="journal-img-title">novi test</div> </a> </li>
i fixed changing selector , adding class
$('.journal-entry').hover(function(){ var name = $(this).attr('name'); $("a",this).children('.titler').toggle("slide", { direction: "down" }, 200).html(name); }, function(){ $("a",this).children('.titler').toggle("slide", { direction: "down" }, 200); });
Comments
Post a Comment