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＆gt; 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发布的插件。

下拉菜单显示效果

1 个答案: