Эффект слайда с 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 из поля зрения, немного похоже на прокрутку окна (горизонтальный или вертикальный). Я думаю, что я не могу использовать фактическую прокрутку, потому что содержание DIVS загружается через AJAX, поэтому я не могу определить его точно, прежде чем он будет загружен.

Есть идеи?

Тиа

Грег

Answer 1

Грег, похоже, что вы ищете что -то подобное здесь:

http://jsfiddle.net/2e5qv/

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

Родитель <div> действует как своего рода окно, чтобы показать только текущий контент.

Answer 2

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

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

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

Answer 3

Я взял то, что предоставил Сарфраз и изменил его немного на основе того, что я думаю, вы искали. Ради демонстрации, я также сделал его огонь на событии клики. Вы можете найти рабочий пример здесь: 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');
});