Bootstrap hidden.bs.dropdown无法正常工作

Question

我在设置Bootstrap下拉式样，并且在列表项出现下拉列表项时滑动。
http://jsfiddle.net/yak613/ffwvv347/

// Smooth Dropdown transition 
$('.dropdown').on('show.bs.dropdown', function (e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); 
    var listItems = $(this).find(".dropdown-menu").find("li a"); 
    listItems.animate({opacity : '1', left : '0px'}, 400, 'linear'); 

}); 



$('.dropdown').on('hide.bs.dropdown', function (e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
}); 
$(".dropdown").on("hidden.bs.dropdown", function(){ 
    var listItems = $(this).find(".dropdown-menu").find("li a"); 
    listItems.css({'opacity' : '0', 'left' : '-50px'}); 
}); 

什么是应该做的是动画列表项的左侧位置，因为他们滑下，使得酷动画。但是，当列表向后滑动时，项目会立即消失，而不是等到下拉菜单完全隐藏，因为hidden.bs.dropdown可以工作。为什么在下拉菜单完全隐藏之前它隐藏了，我该如何做这项工作？

Answer 1

使用相同的动画隐藏和设置幻灯片上下时间等于动画时间，但这取决于您。

$('.dropdown').on('hide.bs.dropdown', function (e) { 
    $(this).find('.dropdown-menu').first().stop(true, true).slideUp(400); 
    var listItems = $(this).find(".dropdown-menu").find("li a"); 
    listItems.animate({opacity : '0', left : '-50px'}, 400, 'linear'); 
});