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%'});
});