Плавная смена div

Нужна помощь в реализации такой штуки.

Есть три дива "кнопки", они должны быть именно такими, пустыми, в css я уже им задаю размеры и фоновую картинку.

Код

<div id="button1"></div>

<div id="button2"></div>

<div id="button3"></div>

и есть три дива с контентом (текст и картинки)

Код

<div class="info1">{тут содержимое}</div>

<div class="info2">{тут содержимое}</div>

<div class="info3">{тут содержимое}</div>

первый блок изначально расположен на странице, два других скрыты.

нужно при помощи jquery сделать чтобы при нажатии на #button2 - первый блок плавно сменялся на второй, при нажатии на #button3 - плавно сменяется второй блок на третий и т.д

пытался сделать при помощи hide и show, но они не плавно появляются исчезают, а выезжают и уезжают в разные стороны, т.е мне так не нужно.