Question

所以，我得到了一个图像列表，每当鼠标经过 li 元素时，一些Lorem Ipsum文本就会显示出来。但是如果你快速地将鼠标位置从一个列表元素更改为另一个列表元素，那么slideToggle将保持离开，并且在你悬停元素时会一直多次出现。

另外：当光标在 p 元素上显示时，它会继续运动，因为它无法被识别，就像鼠标在 li ，只有 p 。我怎么能避免这种情况？

谢谢你＆lt; 3

＆＃13;

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

＆＃13;

#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;
        }

＆＃13;

<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>

＆＃13;

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

如何通过悬停多次触发来阻止slideToggle重复自身？

1 个答案: