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

Question

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

<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, поэтому я не могу точно расположить его перед загрузкой.

Есть идеи?

TIA

1010 * Greg *

Answer 1

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

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

См. Рабочую демонстрацию здесь.

Answer 2

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

http://jsfiddle.net/2E5Qv/

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

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

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');
});