jQuery оживить высоту до авто

Question

У меня есть ul с высотой 125px.Когда пользователь наводит указатель мыши, я хочу, чтобы высота автоматически изменялась до высоты автоматически.И когда пользователь выходит из уль, что UL снова достигает 125px.

    $('.box .box-overflow ul').hover(function() {
        $(this).animate({
            height: '100%'
        }, 400);
    }, function() {
        $(this).animate({
            height: '125px'
        }, 400);
    });

Это работает, но когда пользователь входит в уль, он расширяется, но не с хорошим анимационным эффектом?1005 * Может ли кто-нибудь помочь мне с этим?:)

Answer 1

Вы можете сделать это с помощью scrollHeight.

$('ul').hover(function(){
  $(this).animate({
    height: $(this)[0].scrollHeight+'px'
  }, 400);
}, function(){
  $(this).animate({
    height: '125px'
  }, 400);
});

Answer 2

попробуйте что-то подобное при наведении курсора:

var height = $(this).css('height','auto').height();  // get real height
$(this).css('height','125px'); // return current state;
$(this).animate({height: height+'px'}, 400);

Активность в первых двух строках не должна быть видна пользователю, но вы можете получить реальную высоту вашего UL.Вы можете создать эффект скольжения, только если знаете конечную высоту.

Рабочий пример здесь: http://jsfiddle.net/axpFk/

Answer 3

Опубликовал это в другом месте, но я чувствую, что и здесь это полезно: я сделал небольшой плагин, который решает эту проблему - должен быть довольно простым, основываясь на методе Дарси Кларк, который был опубликован здесь , снекоторые (имо) очень необходимые улучшения.Просто подключи и играй для jQuery:

https://github.com/azaslavsky/jQuery-Animate-Auto-Plugin