slide effect with jquery

Question

I'd like to create a slide effect using jQuery. I have several div's:

<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>

The idea is that div_2 appears while sliding and "pushing" div_1 out of sight, a little like scrolling a window (horizontal or vertical). I think I can't use actual scrolling because the divs' content is loading via ajax, so I can't position it precisely before it's loaded.

Any idea?

TIA

greg

Answer 1

You mean like this:

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

See the working demo here.

Answer 2

Greg, it sounds like you are looking for something like I have done here:

http://jsfiddle.net/2E5Qv/

If so, what you want to do is to contain all of those <div> s inside a parent, and then when you want to slide them, animate the top of each div up the correct number of pixels. The solution I provided above has each <div> more or less set to a fixed height of 20px (via line-height ).

The parent <div> acts as a sort of window to show only the current content.

Answer 3

I took what Sarfraz provided and modified it slightly based on what I think you were looking for. For the sake of the demo, I also made it fire on the click event. You can find the working example here: 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');
});