Question

我得到了以下代码，我想知道如何避免动画垃圾邮件。我的意思是，如果你在框内垃圾邮件hovers，它将排队所有的动画。有时你可能会意外地徘徊两次，这个盒子排队所有动画似乎很烦人。

<div class="desc">ventore veritatis et quasi architecto...</div>

$(".desc").hover(function () {
    var el = $(this),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
    el.height(curHeight).animate({
        height: autoHeight + 20
    }, 500);
    $(this).animate({
        backgroundColor: 'rgba(255,255,255,0.85)'
    });
},
function () {
    $(this).animate({
        height: 100
    }, 150);
    $(this).animate({
        backgroundColor: 'rgba(255,255,255,0.6)'
    });
});

.desc {
    height:150px;
    width:100%;
    bottom:0;
    position:absolute;
    overflow:hidden;
}

我想对此有任何想法。例如，当hovered此框时，hover动画将被禁用2秒。我怎么能这样做？

我想要这个，因为我有另外3个这样的盒子，它很烦人。虽然不是一个大问题。

Fiddle

Answer 1

您必须使用.stop()停止动画链接。

您可以在动画之前在两个函数中添加它以清除队列，如下例所示。

$(".desc").hover(function () {
    var el = $(this),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();

    el.stop(true); // end before starting again

    el.height(curHeight).animate({
        height: autoHeight + 20
    }, 500);
    $(this).animate({
        backgroundColor: 'rgba(255,255,255,0.85)'
    });
}, function () {
    var el = $(this);
    el.stop(true); // end before starting again

    el.animate({
        height: 100
    }, 150);
    el.animate({
        backgroundColor: 'rgba(255,255,255,0.6)'
    });
});

FIDDLE

只有一个参数意味着清除队列，但不会直接进入结束动画状态 Read the documentation for more

如何避免JQuery动画垃圾邮件？

1 个答案: