Установить длительность эффекта на основе свойства css

$('.container').animate({ 'height': el.height()  }, { duration: 300});
Таким образом, высота el может быть меньше или больше высоты .container.

Как я могу сделать так, чтобы длительность эффекта длилась дольше, когда разница между текущей высотой и той, на которую я анимирую, больше?

3 2
javascript jquery jquery-effects

3 ответа:

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

Измените магическую константу 5 на все, что кажется разумным. Вы не предоставили критериев для вычисления длительности; вы могли бы связать ее с Math.min(/*above expression*/, maxDuration), или, возможно, она должна быть не линейной, а логарифмической. Вы можете настроить его довольно легко. Хотя это хорошее место для начала.

3
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/

Правка: неважно, посмотрите на ответ Дэвина.

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