下拉菜单显示效果

我有一个下拉按钮，单击时显示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

来源

2014-11-05 MIke

您可以使用插件[动画下降淹没]（http://www.myjqueryplugins.com/jquery-plugin/dropdown） – Rushee 2014-11-05 08:02:28

效果很好，但我需要的只是一个简单的淡入淡出匹配我主题。 – MIke 2014-11-05 08:08:56

那么你可以尝试jQuery的动画，但似乎opacity只影响选项的文字，而不是在那里存储块。

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

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

如果你愿意，你应该使用插件光滑下拉菜单，例如一个@Rushee公布。

来源

2014-11-05 08:38:49

您的示例动画在Chrome中不适用于我。但在Firefox中工作。 – MIke 2014-11-05 08:50:41

我稍后会检查我什么时候回家，我可能会错过一些东西。它也应该在Chrome上运行。 – 2014-11-05 09:06:52

下拉菜单显示效果

回答

相关问题