Javascript 下拉菜单显示效果

我有一个下拉按钮，点击时显示2个选项。我希望该选项在点击下拉按钮时显示为淡入淡出

HTML

我试图将其添加到css中，但什么也没有发生。当显示时，我也尝试了不透明度0>1，但它不会影响菜单

    -webkit-transition: opacity .5s ease-in-out;
       -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
         -o-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;

---

示例

您可以尝试jQuery动画，但不透明度似乎只影响选项文本，而不影响存储它的块

jsfiddle：

具有更好动画效果的新JSFIDLE：

---

如果你想要平滑的下拉列表，你应该使用插件，例如@Rushee发布的插件。

你可以使用插件，效果很好，但我需要的只是一个简单的淡入淡出以匹配我的主题。你的示例动画在chrome中不适用于我。但是在firefox上工作。我会在回家后检查，我可能会错过一些东西。它应该也适用于铬。

select
{
    background: #E6E0D0;
    color: #694a31;
    width: 100px;
}

    -webkit-transition: opacity .5s ease-in-out;
       -moz-transition: opacity .5s ease-in-out;
        -ms-transition: opacity .5s ease-in-out;
         -o-transition: opacity .5s ease-in-out;
            transition: opacity .5s ease-in-out;