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

Answer 1

Something like this look like what you want? I get the select lists height and divide by the number of options. This gives me roughly the size of one option (directly getting an option has zero height btw, thus the need for the calculation). Then I use animate. You can hover your mouse over the blue box to see the effect.

http://jsfiddle.net/9daYV/

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