jQuery или css slideUp / slideDown для окна выбора с размером> 1 - PullRequest
Новая
       16

jQuery или css slideUp / slideDown для окна выбора с размером> 1

0 голосов
/ 22 января 2012

jQuery slideUp и slideDown, похоже, ничего не делают с выборками. Я могу обернуть select в 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).

1 Ответ

1 голос
/ 22 января 2012

Что-то вроде этого похоже на то, что вы хотите? Я получаю высоту списков выбора и делю на количество вариантов. Это примерно соответствует размеру одной опции (прямое получение опции имеет нулевую высоту между прочим, следовательно, необходимость в расчете). Тогда я использую анимацию. Вы можете навести курсор мыши на синее поле, чтобы увидеть эффект.

http://jsfiddle.net/9daYV/

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