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

将魔术常数5更改为任何看起来合理的东西。您没有提供计算持续时间的标准;你可能会将其与Math.min(/*above expression*/, maxDuration)绑定，或者它不应该是线性的，而是对数的。你可以很容易地定制它。虽然这是一个很好的开始。

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