jQuery or css slideUp/slideDown for a selectbox with size > 1

Question

jQuery's slideUp and slideDown don't seem to do anything with selects. I can wrap the select in a div and use slideUp and slideDown, but so far the effect I get, for the result I want, is really jerky.

With a select box of size greater than 1, I want to slide up, leaving just a size 1 select. (Not a totally hidden select.)

So the appearance looking like an animated transition from

<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>

to

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

Being wrapped in a div is fine. I just can't get a smooth transition, css and/or jQuery, that'll make it work cleanly in Chrome, FF, and Opera (I don't care about IE).