hover 多次触发slideToggle 如何防止slideToggle 重复？

Question

因此，我得到了一个图像列表，并且每次鼠标经过 li 元素时都会显示一些 Lorem Ipsum 文本。但是，如果您快速将鼠标位置从一个列表元素更改为另一个列表元素，则 slideToggle 会在您将鼠标悬停在元素上时保持离开和出现的次数。

此外：当光标移到出现的 p 元素上时，它会继续移动，因为无法识别它，就像鼠标悬停在 li，只有p。我怎样才能避免这种情况？

My demo on JSFiddle

谢谢 <3

$('#tabela_trabalhos ul li').mouseover(function () {
    $(this).find('p').slideToggle(200)
    
})

$('#tabela_trabalhos ul li').mouseleave(function () {
    $(this).find('p').fadeOut(400)
    
})

#tabela_trabalhos {
    margin-top: 32px;
    position: absolute;
    right: 10px;
    left: 10px;
}

#tabela_trabalhos ul {
    list-style: none;
    display: flex;
}

    #tabela_trabalhos ul li {
        width:100%;
        height:100px;
        background: #aaa;
        transition:1s;
    }

        #tabela_trabalhos ul li:hover {
            background:#888;
            transition:0.2s;
            cursor:pointer;
        }

        #tabela_trabalhos ul li p {
            display:none;
            color:white;
            margin:25px 0 0 25px;
            font-size:20px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabela_trabalhos">
                <ul>
                    <li><p>Lorem Ipsum Dolor Sit Amet</p></li>
                    <li><p>Lorem Ipsum Dolor Sit Amet</p></li>
                    <li><p>Lorem Ipsum Dolor Sit Amet</p></li>
                </ul>

                <ul>
                    <li><p>Lorem Ipsum Dolor Sit Amet</p></li>
                    <li><p>Lorem Ipsum Dolor Sit Amet</p></li>
                    <li><p>Lorem Ipsum Dolor Sit Amet</p></li>
                </ul>
            </div>

Answer 1

尝试使用 mouseenter 而不是 mouseover，您可以使用 finish() 来确保任何先前的动画立即停止

$('#tabela_trabalhos ul li').mouseenter(function () {
    $(this).find('p').finish().slideToggle(200);        
});

$('#tabela_trabalhos ul li').mouseleave(function () {
    $(this).find('p').finish().fadeOut(400);        
});

DEMO

hover 多次触发slideToggle 如何防止slideToggle 重复？

How to prevent slideToggle from repeating itself when being triggered many times by hover?

html

css

jquery

cursor

slidetoggle