Jquery 有可能让Twitter引导下拉菜单淡入吗？

我试图让Twitter引导上的标准导航栏下拉菜单淡入，而不是仅仅出现。我曾尝试在中添加类

fade

和

，但似乎没有褪色。这是我的小提琴

我尝试了另一种方法-例如，在上的答案，但由于某种原因，我无法使用jquery定位下拉触发器。
也许可以使用jquery执行类似操作：

$(function() {
    $('.dropdown-toggle').click(function() {
        $(this).next('.dropdown-menu').fadeToggle(500);
    });
});​

您可以在此处检查小提琴：

更新：我忘了说你应该从
ul
中删除
中的
淡入
，看看这个，CSS动画效果最好

.open > .dropdown-menu {
  animation-name: slidenavAnimation;
  animation-duration:.2s;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  animation-fill-mode: forwards;

  -webkit-animation-name: slidenavAnimation;
  -webkit-animation-duration:.2s;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-timing-function: ease;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: slidenavAnimation;
  -moz-animation-duration:.2s;
  -moz-animation-iteration-count: 1;
  -moz-animation-timing-function: ease;
  -moz-animation-fill-mode: forwards;
}
@keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes slidenavAnimation {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

您可以添加其他CSS属性以制作更复杂的动画。例如，我一直在玩left:-30->left:0。
你可以试试这个：

// Add fadeToggle animation to dropdown       
$('.dropdown').on('show.bs.dropdown', function(e) {   
  $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
}); 

// Add fadeToggle animation to dropdown 
$('.dropdown').on('hide.bs.dropdown', function(e) { 
  $(this).find('.dropdown-menu').first().stop(true, true).fadeToggle(500); 
});

它利用了Bootstrap现有的
show.bs.dropdown
和
hide.bs.dropdown
功能，并将下拉效果改为“淡入”而不是“出现”。如果希望“幻灯片”生效，还可以将
fadeToggle（）
更改为
slideDown（）
。希望这有帮助

这是小提琴：
我也找到了很好的解决方案：

// Add slideDown animation to dropdown
$('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
});

// Add slideUp animation to dropdown
$('.dropdown').on('hide.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
});

示例：
我想提交一个仅限于CSS的现代方法：

.dropdown-menu.fade {
  display: block;
  opacity: 0;
  pointer-events: none;
}
.open > .dropdown-menu.fade {
  pointer-events: auto;
  opacity: 1;
}

这允许
.fade
处理过渡动画，但
.open
是控制不透明度和指针状态的工具。
对Jason Featheringham在Bootstrap 4中工作的小调整

.dropdown-menu.fade {
   display: block;
   opacity: 0;
   pointer-events: none;
}

.show > .dropdown-menu.fade {
   pointer-events: auto;
   opacity: 1;
}

谢谢，是的，这是朝着正确的方向迈出的一步。它会影响目前所有的下拉列表，但我相信我可以用$（这个）以某种方式修改它。。。另一个问题是，当我在区域外单击时，它不会取消，但我相信我能找到答案。。。谢谢不客气！我已经更新了我的答案，所以它只影响正确的下拉列表。谢谢。。。事实上，虽然您发布的代码对我来说非常有用，但在堆栈溢出上呈现文本可能有问题。。。因为当我复制块时，它会弄乱页面，但当我只是复制中间行时，它工作得很好。。。我想这与最后两行有关，我想不出来，但你可能想在编辑下看一下，看看文章中是否有奇怪的字符。如果你找不到它，那么我相信任何未来的访问者都可以在最后两行输入，而不是复制它。谢谢，againI没有发现任何错误，可能是因为我从JSFIDLE复制了代码…我不担心它，我只是想我会提到它，以防将来有人复制和粘贴它。。。也可能是我这边的事情。现在还没有时间来测试，所以很抱歉我不想给你打勾，但很高兴看到它似乎可以在没有javascript的情况下完成。谢谢，我还没有测试过这个，但从投票结果来看，它似乎必须工作，而且css显然更可取，所以我正在重新考虑这个问题。我不知道为什么有人不测试他需要的解决方案。对于Bootstrap 4.3x，你必须更改代码第一行的
.open>。下拉菜单{
，改为
.show>。下拉菜单{
效果非常好！请解释这是如何解决手头的问题的，以帮助未来的访问者理解这个问题。我更新了代码，并通过OP更好地解释了它是如何解决问题的。最佳答案，快速、简单、有效：d此答案比@Benjamin提供的所选答案更有效。只要确保您将类“.fade”添加到“.dropdown menu”的相同元素类处于打开状态。-它处理淡入和淡出，所选的一个只淡入并在关闭时立即消失。-此答案的代码较少。在引导4中，您必须使用
.open>.dropdown menu。淡入
提示，键盘导航无法正常工作，因为您通过设置
opac来隐藏关闭的菜单将
设置为
0
，而不是将
显示设置为
none
。因此，如果使用键盘进行切换，焦点将转移到关闭菜单中的项目，而通常会跳过这些项目。