下拉菜单显示效果

Question

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

HTML

<select name="lang_choice" id="lang_choice">
    <option value="da" selected="selected">Dansk</option>
    <option value="en">English</option>

</select>

CSS

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

我尝试将其添加到我的 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;

样本fiddle

Answer 1

你可以试试 jQuery 动画，但似乎opacity 只影响选项文本，而不影响它存储的块。

jsfiddle：http://jsfiddle.net/2dvcam8f/5/

具有更好动画效果的新 jsfiddle：http://jsfiddle.net/2dvcam8f/9/

如果您想要平滑的下拉菜单，您应该使用插件，例如 @Rushee 发布的插件。