jQueryのアニメーションの高さを自動

Question

私は125pxの高さのulを持っています。ユーザーがulを動かすと、高さがautoになります。ユーザーがulの外に出たとき、ULは125pxに再度コラボレートします。

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

この作業が、ユーザーは、ULに来るとき、それはではなく、素敵なアニメーション効果の拡大？

これで私に何か助けてもらえますか？ :)

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

最初の2行でactivivtyは、ユーザーが見る蜂べきではありませんが、あなたはあなたのULの実際の高さを得ることができます。あなたは最終的な高さを知っている場合のみ、派手な滑り効果を作り出すことができます。

実施例はここにある：http://jsfiddle.net/axpFk/

Answer 3

は、他の場所でこの投稿が、私はここにもその便利なように感じる：私はこの問題を扱う小さなプラグインを作った - （いくつかと、hereを公開されているダーシークラークの方法に基づいて、かなり簡単でなければなりませんimo）非常に必要な改善。ちょうどプラグとjQueryのためにプレー：

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