Эффект слайда с помощью jquery

Question

Я хотел бы создать эффект слайда, используя jQuery. У меня есть несколько дел:

<div id='div_1'>content currently displayed</div>
<div id='div_2' style="display:none">content to be loaded</div>
<div id='div_3' style="display:none">content to be loaded</div>

Идея состоит в том, что div_2 появляется при скольжении и "выталкивании" div_1 из поля зрения, немного похоже на прокрутку окна (горизонтальное или вертикальное). Я думаю, что не могу использовать фактическую прокрутку, потому что содержимое div загружается через ajax, поэтому я не могу точно расположить его перед загрузкой.

Любая идея?

ТИА

Greg

Answer 1

Грег, похоже, ты ищешь что-то вроде того, что я сделал здесь:

http://jsfiddle.net/2E5Qv/

Если это так, то вы хотите, чтобы содержать все эти <div>s внутри родительского элемента, а затем, когда вы хотите сдвинуть их, анимируйте верхнюю часть каждого делителя на правильное количество пикселей. Решение, которое я предоставил выше, имеет <div> более или менее установлен на фиксированную высоту 20 пикселей (через line-height).

Родитель <div> действует как своего рода окно для отображения только текущего содержимого.

Answer 2

Вы имеете в виду, как это:

$('#div_2').slideDown('slow', function(){
  $('#div_1').slideUp('slow');
});

Смотрите рабочее демо здесь.

Answer 3

Я взял то, что предоставил Сарфраз, и слегка изменил его, основываясь на том, что, как мне кажется, вы искали. Для демонстрации я также запустил событие click. Вы можете найти рабочий пример здесь: http://jsbin.com/emowu3/3

$('#div_1').click(function(){
    $('#div_1').slideUp('slow');
    $('#div_2').slideDown('slow');
});
$('#div_2').click(function(){
    $('#div_2').slideUp('slow');
    $('#div_3').slideDown('slow');
});
$('#div_3').click(function(){
    $('#div_3').slideUp('slow');
    $('#div_1').slideDown('slow');
});