Тут все работает просто на css свойстве
transition.
Просто по клику одному блоку устанавливается позиция
left: -1000px (чтобы ушел за экрана), а другому
0. А это свойство все эти изменения делает плавными.
JSFiddle
То есть примерно так:
.block {
/* all - свойства, к которым применяется анимация, можно указать только left
1s - плавность (продолжительность), можно указать 0.5s или 3s
linear - тип анимации, в данном случае линейна */
transition: all 1s linear;
position: absolute;
left: 100px;
color: yellow;
background-color: green;
}
.block.active {
left: -200px;
}
<a href="#" id="btn-move">Передвинуть блок</a>
<div class="block">text</div>
$(function() {
$('#btn-move').click(function() {
$('.block').toggleClass('active');
return false;
});
});
