jQuery - 快速移动鼠标时鼠标离开不触发

Question

类似问题有几个答案，但没有一个对我有用，同时仍能达到我想要的效果，或者没有一个我能理解。所以任何帮助或指导都会很棒

这是一个小提琴： http://jsfiddle.net/csoh1vzb/

基本上发生的情况是，当您快速将鼠标悬停在单元格上时，mouseleave 函数不会运行并且我处于活动状态。

我已经“修复了一半”，但仍然不是我想要的那样。

将此添加到mouseenter 可以解决下一次悬停时的问题：

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

（不是真正的修复）

任何帮助都会很棒！

Answer 1

问题不是没有触发mouseleave，您面临的问题是动画需要400ms（默认动画持续时间）才能完成，这意味着动画在应用后直接覆盖mouseleave css更改你在 300 毫秒内离开现场

为避免这种情况，您需要stop 动画。

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

应该做的伎俩。

作为旁注，如果您使用 javascript 制作动画，最好更改为 velocity.js，这比 jQuery 的动画快得多。

Answer 2

只要有可能，最好避免使用 javascript 而更喜欢使用 css 规则。

您可以使用基本的 html 和 css 轻松替换您的 html 生成和淡入淡出动画，如您所见 on this 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));

Answer 3

就个人而言，上面的第一个答案可能更简单，因此是一个更好的答案。但我喜欢这样，因为代码整体看起来更干净一些。 HTML：

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