サイズが1より大きいselectboxのjQueryまたはcss slideUp/slideDown

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> 

から

divの罰金であるに包まれ

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

にアニメ化移行のように見えます。私はスムーズな移行、cssやjQueryを得ることができません。これは、Chrome、FF、Operaで正常に動作するようにします（IEは気にしません）。

Answer 1

このようなものは、あなたが望むように見えますか？私は選択リストの高さを取得し、オプションの数で除算します。これは私におおよそ1つのオプションのサイズを与えます（オプションを直接取得するには高さbtwがゼロであるため、計算が必要です）。それから私はアニメートを使用します。青いボックスの上にマウスを置くと効果を見ることができます。

http://jsfiddle.net/9daYV/

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