使用悬停使div反弹

Question

我正在使用以下方式悬停：

    $('.item a').hover(function () {
        $('#overlay').slideDown();
    }, function () {
        $('#overlay').slideUp();
    });

然而，正如您在此处http://jsfiddle.net/v644X/所见，它会使动画反弹。我该如何解决？

Answer 1

您还必须为hover添加overlay事件。每次开始新的时候都不要忘记清除animation queue (.stop)，

试试吧，

        $('.item a,#overlay').hover(function () {
            $('#overlay').stop().slideDown();
        }, function () {
            $('#overlay').stop().slideUp();
        });

DEMO

---

识别黑客：

在另一个答案中，如果你快速地从a元素中取出鼠标，那么你可以看到叠加层仍然出现。

为了更好的hackles版本，你可以使用，

        var overlay = $('#overlay');

        $('.item a,#overlay').hover(function () {
            if(!overlay.is(':animated')){
                overlay.stop().slideDown();
            }
        }, function () {
            if(!overlay.is(':animated')){
            overlay.stop().slideUp();
            }
        });

DEMO I

Answer 2

尝试

$('.item a').mouseenter(function () {
    $('#overlay').stop().slideDown();
});
$('#overlay').mouseleave(function () {
    $(this).stop().slideUp();
});

演示：Fiddle