动画完成后元素未被隐藏

Question

我不能为我的生活弄清楚为什么我正在运行的这个功能并没有隐藏元素。当将鼠标悬停在列表项上时，我希望其中的两个div设置为49%高度的动画，当鼠标离开此列表项时，它们将返回0并再次获得display: none;。但是，即使display: block;的回调函数中的语句执行，它们也只停留在animate。

以下是动画为49%时的样子：

这时他们回到0：

由于某种原因，包含图像的两个div元素不会被回调中的.hide()函数隐藏。

这是不起作用的功能：

$('#site-wrapper').on('mouseenter', '#images-list li', function() {

    $(this).children('div').show().stop().animate({height: '49%'}, 'fast');
}).on('mouseleave', '#images-list li', function() {

    $(this).children('div').stop().animate({height: 0}, 'fast', function() {
        $(this).children('div').hide();
    });
});

此解决方案可以正常工作，但它可以直接隐藏它，而用户无法看到我不想要的动画：

$('#site-wrapper').on('mouseenter', '#images-list li', function() {

    $(this).children('div').show().stop().animate({height: '49%'}, 'fast');
}).on('mouseleave', '#images-list li', function() {

    $(this).children('div').stop().animate({height: 0}, 'fast').hide();
});

我该怎么做才能解决这个相当愚蠢的错误？

Answer 1

来自.animate()上的文档（强调我的）

  

完整功能

     

如果提供，则完成回调函数   动画完成。这对于串联不同可能很有用   动画按顺序组合在一起。回调不会发送任何   参数，但 this设置为动画的DOM元素。

所以而不是

...
.on('mouseleave', '#images-list li', function() {
    $(this).children('div').stop().animate({height: 0}, 'fast', function() {
        $(this).children('div').hide(); // Wrong line
    });
});

应该是

...
.on('mouseleave', '#images-list li', function() {
    $(this).children('div').stop().animate({height: 0}, 'fast', function() {
        $(this).hide(); // Hide the same div that was animated
    });
});

Answer 2

你可以试试这个吗？最好用一个小提琴来证明这一点：

$('#site-wrapper').on('mouseenter', '#images-list li', function() {
    $this = $(this);
    $this.children('div').show().stop().animate({height: '49%'}, 'fast');
}).on('mouseleave', '#images-list li', function() {
    $this.children('div').stop().animate({height: 0}, 'fast', function() {
        $this.children('div').hide();
    });
});