jQuery анимирует высоту до авто

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

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

Это работает, но когда пользователь входит в ul, он расширяется, но не с красивым анимационным эффектом?

Может ли кто-нибудь помочь мне с этим? :)