动画完成后未隐藏的元素

Question

我不能为了我的生活找出为什么我运行的这个函数没有隐藏元素。当将鼠标悬停在列表项上时，我想让它内部的两个div动画为49%高度，当鼠标离开此列表项时，它们将返回0并再次获得display: none;。但是，即使animate的回调函数中的语句执行，它们仍然保持在display: block;。

这里是什么样子时，他们的动画到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(); 
    }); 
});