2011-06-18 13 views
2
$('.container').animate({ 'height': el.height() }, { duration: 300}); 

したがって、elの高さは、.containerの高さよりも小さくすることも、大きくすることもできます。効果の持続時間をCSSプロパティに基づいて設定します。

現在の高さとアニメーション化する高さの差が大きい場合、エフェクトの持続時間が長くなるようにするにはどうすればよいですか?

+0

なぜしたいですか?一定の期間は妥当と思われます。期間が高さの差に比例する場合、期間は制限されません(つまり、変更には時間がかかりますが、ユーザーフレンドリーではありません)。 – davin

答えて

3
var newHeight = el.height(), 
    oldHeight = $('.container').height(); 
$('.container').animate({height: newHeight}, Math.abs(newHeight-oldHeight)*5); 

マジック定数5を妥当と思われるものに変更します。期間を計算するための基準を指定していませんでした。 Math.min(/*above expression*/, maxDuration)と結びついているかもしれないし、線形ではなく対数であってはならないかもしれない。あなたは非常に簡単にカスタマイズすることができます。それは始めるには良い場所ですが。

1
if ($(.container).height() - $(el).height() > 0) 
{ 
    // Whatever you want to do if the container is higher than el 
} 
else 
{ 
    // Other case 
} 

JS構文は正しいかどうかはわかりますが、動作するはずです。

http://api.jquery.com/height/

EDIT:ネヴァーマインドは、デーヴィンの答えを見てください。

1
$('.container').animate({height:el.height()},($(this).height()-el.height()>el.height())?3000:100); 
関連する問題