jquery鼠标悬停效果bug，mouseover事件总是在mouseout时触发几次答案

【问题标题】：jquery mouse hover effect bug, mouseover event always triggers a few times on mouseoutjquery鼠标悬停效果bug，mouseover事件总是在mouseout时触发几次
【发布时间】：2011-11-02 12:32:41
【问题描述】：

我有一个简单的画廊网格，其中包含一个显示标题的嵌套跨度，我想在鼠标悬停时向上滑动，并在鼠标移出时隐藏。

一切正常，除非鼠标向下移动到标题所在的位置和/或从磁贴底部悬停在磁贴之外，然后悬停效果会不受控制地重复几次。

起初我以为可能是因为 span 包含在作为悬停触发器的锚点内，但将其移出也不起作用。

有什么想法吗？

演示在这里：http://www.winterealm.com/gallery/

标记：

<div class="gallery_container">
    <ul>
        <li><a href=""><img src="assets/img/artistisch.jpg" alt="aaa"/><span class="title">Category A</span></a></li>
        <li><a href=""><img src="assets/img/attraktiv.jpg" alt="bbb"/><span class="title">Category B</span></a></li>
        <li><a href=""><img src="assets/img/historisch.jpg" alt="ccc"/><span class="title">Category C</span></a></li>
        <li><a href=""><img src="assets/img/popart.jpg" alt="ddd"/><span class="title">Category D</span></a></li>
        <li><a href=""><img src="assets/img/portrait.jpg" alt="eee"/><span class="title">Category E</span></a></li>
        <li><a href=""><img src="assets/img/sketch.jpg" alt="fff"/><span class="title">Category F</span></a></li>
    </ul>
</div>

这是 jquery

$(document).ready(function(){
    $('.gallery_container a').mouseover(function(){
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200);
    });

    $('.gallery_container a').mouseout(function(){
        $(this).children('.title').animate({
            opacity: 0,
            bottom: -30
        },200);
    });
});

【问题讨论】：

标签： jquery hover jquery-animate mouseover mouseout

【解决方案1】：

这里的问题是每次鼠标移到元素或子元素上时都会触发 mouseover。尝试改用 mouseenter 和 mouseleave 事件。

【讨论】：

是的，最短的解决方案 = 最好的！这似乎是这样做的方法！非常感谢！

【解决方案2】：

试试这个。

$(document).ready(function() {
$('.gallery_container a').hover(function() {
    $(this).children('.title').stop().animate({
        opacity: 100,
        bottom: 0
    }, 200);
}, function() {
    $(this).children('.title').stop().animate({
        opacity: 0,
        bottom: -30
    }, 200);
}); 
});

您可以在此处查看现场演示。 - http://jsfiddle.net/8Hd7s/

【讨论】：

这也可以，但是在将鼠标快速滚动到整行上时，有一个轻微的微调会阻止幻灯片动画。当您不希望每次经过时都为所有内容设置动画时很有用...感谢您的解决方案！
根据您最初的问题，我认为这就是您要避免的。您只需在动画函数之前删除 .stop() 即可更改此设置。
嗨@AustinBrunkhorst 你能帮忙解决这个问题吗：stackoverflow.com/questions/31835128/…

【解决方案3】：

所以你可能想要实现一个非常简单的锁定机制，如：

var fCurrentlyMoving = false;       
$('.gallery_container a').mouseover(function(){
    if (!fCurrentlyMoving) {
        fCurrentlyMoving = true;
        $(this).children('.title').animate({
            opacity: 100,
            bottom: 0
        },200, function() {
            fCurrentlyMoving = false;
        });
    }
});

这不是密封的竞争条件，但它不需要。

【讨论】：