jQuery - 当鼠标快速移动时，Mouseleave事件不触发

Question

有一些类似的问题的答案，但没有一个能够在仍然给我所需效果的同时工作，或者没有一个我能理解的。所以任何帮助或指导都将是很好的。

这里有一个示例：http://jsfiddle.net/csoh1vzb/ 基本上，当您快速悬停在单元格上时，mouseleave函数不会运行，留下了活动状态。

我已经“半修复”了这个问题，但它仍然不是我想要的。

将此添加到mouseenter可以在下一次悬停时修复该问题：

$('.cell .hover').fadeOut();
$('.cell span').animate({ "marginTop" : "500px" });

（并不真正修复）

任何帮助都将是伟大的！

- Nick

---

我认为在JavaScript中完成所有操作太过繁重，你应该只在JavaScript中保留margin-top动画，并尝试使用CSS创建淡入淡出动画，以及在HTML本身中生成.hover。我将尝试将其制作成一个fiddle。 - user4467065

Answer 1

问题不在于未触发的mouseleave事件，而是您面临的问题是动画需要400毫秒（默认动画持续时间）才能完成，这意味着当您在300毫秒内离开字段时，动画会直接覆盖应用后的mouseleave css更改。

为了避免这种情况，您需要停止动画。

$('.cell span').stop();
$('.cell .hover').fadeOut();

这应该能解决问题。

另外，如果你要使用JavaScript进行动画，最好改用velocity.js，它比jQuery的animate要快得多。

- baao

Answer 2

尽可能避免使用JavaScript，而是优先使用CSS规则。

您可以轻松地使用基本的HTML和CSS替换您的HTML生成和淡入淡出动画，如您在这个jsfiddle链接中所见。

完全编写您的HTML：

<a href="" class="cell cell-01" title="ONE">
    <div class="hover"><span>ONE</span></div>
</a>
<a href="" class="cell cell-02" title="TWO">
    <div class="hover"><span>TWO</span></div>
</a>

在你的 CSS 中定义大部分规则：

.cell {width: 200px; height: 200px; background: #f00; float: left; display: block; overflow: hidden;}

.cell:hover .hover {
        display:inline-block;
        opacity: 1;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
}

.hover {
    display:inline-block;
    width: 200px; 
    height: 200px; 
    background: #000; 
    text-align: center;
    opacity: 0;
        transition: opacity .25s ease-in-out;
        -moz-transition: opacity .25s ease-in-out;
        -webkit-transition: opacity .25s ease-in-out;
}

.hover span {display: inline-block; padding: 10px 20px; font: bold 12px arial; font-style: italic; text-transform: uppercase; background: #222; border: 2px solid #fff; color: #fff;}

而且您可以轻松减小JavaScript的大小，使整个程序更加稳定和快速。

(function ($) {
    $('.cell').on('mouseenter', function (){
        var $this = $(this);
        $(this).find('span').stop(true, false).animate({ "marginTop" : ($(this).innerHeight() / 2 - 19) + "px" });
    }).on('mouseleave', function (){
        var $this = $(this);        
        $(this).find('span').animate({ "marginTop" : "500px" });
    });
}(jQuery));

- user4467065

---

我正在使用JS将我的HTML添加到其中，因为单元格实际上是动态的，其中的内容会更改。我还要考虑旧浏览器，因此无法使用CSS3。谢谢您的时间！ - Nick

Answer 3

就我个人而言，以上第一个答案可能更简单，因此是更好的答案。但我喜欢这个答案，因为代码整体上看起来更清晰。

<div class="cell"> <a href="" class="hover" title="ONE"><span>ONE</span></a>

</div>
<div class="cell"> <a href="" class="hover" title="TWO"><span>TWO</span></a>

</div>

CSS：

.cell {
    width: 200px;
    height: 200px;
    background: #f00;
    float: left;
    display: block;
    overflow: hidden;
    position:relative;
}
.hover {
    width: 200px;
    height: 200px;
    background: #000;
    text-align: center;
    position: absolute;
    top:-200px;
}
.hover span {
    display: inline-block;
    padding: 10px 20px;
    font: bold 12px arial;
    font-style: italic;
    text-transform: uppercase;
    background: #222;
    border: 2px solid #fff;
    color: #fff;
}

JavaScript：

(function ($) {
    $('.cell').on('mouseenter', function () {
        $(this).find('span').stop().animate({
            "marginTop": ($(this).innerHeight() / 2 - 19) + "px"
        });
        $(this).find('.hover').stop().animate({
            "top": 0
        });
    }).on('mouseleave', function () {
        var $this = $(this);

        $(this).find('.hover').stop().animate({
            "top": "-200px"
        });
        $(this).find('span').animate({
            "marginTop": "0px"
        });
    });
}(jQuery));

- Michael Christensen

---

锚点包裹 div 和 span 标签的原因是，如果用户没有启用 JS，他们仍然可以使用链接。谢谢！ - Nick

就我个人而言，我不在乎项目的顺序，重要的是JavaScript的实现看起来更加简洁。概念仍然是相同的。 - Michael Christensen

换句话说，翻转元素<div>和<a>，但保持类名在相同的相对位置应该可以正常工作。 - Michael Christensen