javascript - jQuery .toggle 堆叠样式

Question

我在使用 .toggle 上下滑动元素时遇到问题，问题是当我尝试将光标快速移动到元素上时它变得一团糟。元素的 ID 被删除，我得到由 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>

我该如何解决这个问题？我试过使用 .stop 但它没有解决问题。我已尝试减少动画时间，但问题仍然存在。

.js代码

$(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 the img">
        <a href="#">
            <img class="journal-img" src="imgsrc">
            <div id="journal-img-title">Novi test</div>
        </a>
</li>

Answer 1

我通过更改选择器和添加类来修复它

$('.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);
});