javascript - css プロパティに基づいて効果時間を設定する

Question

$('.container').animate({ 'height': el.height()  }, { duration: 300});

したがってel、 の高さは の高さよりも小さくても大きくてもかまいません.container。

現在の高さとアニメートしている高さとの差が大きい場合に、効果の持続時間が長くなるようにするにはどうすればよいですか?

Answer 1

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

Change the magic constant 5 to anything that seems reasonable. You didn't provide criteria for computing the duration; you might bound it with Math.min(/*above expression*/, maxDuration), or maybe it shouldn't be linear but logarithmic. You can customize it quite easily. Although that's a good place to start.

Answer 2

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/

編集：気にしないで、ダビンの答えを見てください。

Answer 3

$('.container').animate({height:el.height()},($(this).height()-el.height()>el.height())?3000:100);