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

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

3 个答案: