Set effect duration based on a css property

Question

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

So el's height can be smaller or greater than .container's height.

How can I make it so the effect duration lasts longer when the difference between the current height and the one to which I'm animating is larger?

Why do you want to? A fixed duration seems reasonable. If the duration was proportional to the height difference, it would be unbounded (i.e. large changes would take long, which isn't too user-friendly). — davin, Jun 18 '11 at 17:26

score 3 · Accepted Answer · answered Jun 18 '11 at 17:35

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.

pikzen · Answer 2 · 2011-06-18T17:37:19.263

1

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

Not sure if it's proper JS Syntax, but it should work.

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

EDIT: Nevermind, look at davin's answer.

edited Jun 18 '11 at 17:37

answered Jun 18 '11 at 17:25

pikzen

1,413
1
10
18

score 1 · Answer 3 · answered Jun 18 '11 at 17:39

1

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

answered Jun 18 '11 at 17:39

Babiker

18,300
28
78
125

Set effect duration based on a css property

3 Answers3