Метод animate

Все методы которые описаны здесь, несколько ограниченны, они делают именно то, для чего созданы. Если вам нужно больше контроля за анимацией - используйте универсальный метод animate.

Первым параметром этот метод принимает объект, в котором следует задать новые значения CSS свойств, которые вы хотите анимировать. А вторым параметром время выполнения анимации.

Давайте сделаем так, чтобы по нажатию на кнопку элемент сжался до размера высота 50px, ширина 100px:

<style>
#elem {
    width: 150px;
    height: 150px;
    padding: 10px;
    border: 1px solid green;
}
</style>

<button id="button">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>

<script>
$('#button').click(function() {
  $('#elem').animate({height: 50, width: 100}, 1000);
});
</script>

Если указать значение в таком формате height: '+=50', тогда анимация будет работать так: к текущему значению высоты будет прибавлено 50px и элемент будет плавно анимирован до нового значения:

<style>
#elem {
    width: 150px;
    height: 150px;
    padding: 10px;
    border: 1px solid green;
}
</style>

<button id="button">Нажми на меня</button>
<div id="elem">Блок с текстом.</div>

<script>
$('#button').click(function() {
    $('#elem').animate({height: '+=50', width: '+=50'}, 1000);
});
</script>