jQuery 或 css slideUp/slideDown 用于大小 > 1 的选择框

Question

jQuery 的 slideUp 和 slideDown 似乎对选择没有任何作用。我可以将选择包装在一个div中并使用slideUp和slideDown，但到目前为止我得到的效果，对于我想要的结果，真的很生涩。

对于尺寸大于 1 的选择框，我想向上滑动，只留下尺寸为 1 的选择。 （不是完全隐藏的选择。）

所以外观看起来像是一个动画过渡

<select size=10>
<option value="1">foo1</option>
<option value="2">foo2</option>
<option value="3">foo3</option>
<option value="4">foo4</option>
<option value="5">foo5</option>
<option value="6">foo6</option>
<option value="7">foo7</option>
<option value="8">foo8</option>
<option value="9">foo9</option>
<option value="10">foo10</option>
</select>

到

<select>
<option value=""></option>
</select>

被包裹在一个 div 中很好。我只是无法平滑过渡，css 和/或 jQuery，这将使它在 Chrome、FF 和 Opera 中干净地工作（我不关心 IE）。

Answer 1

这样的东西看起来像你想要的吗？我得到选择列表的高度并除以选项的数量。这给了我一个选项的大致大小（直接获得一个选项的高度为零，因此需要计算）。然后我使用动画。您可以将鼠标悬停在蓝色框上以查看效果。

http://jsfiddle.net/9daYV/

$('#trigger').hover( function() {
    var optionHeight = $('select').height() / $('option').length;
    $('select').animate({ height: optionHeight + 'px' });
}, function() {
    $('select').animate({ height: '100%'});
});