jquery slide div within a div

Question

I have a container div element, this should contain all child div elements. I saw this thread: Slide a div offscreen using jQuery and I was wondering how to implement it (wi

Answer 1

Add all three div in a container div, then make the window wrap around the long div and hide the overflow.

Example if the window area is 960px then the div inside would be 3x 960 (2880)

You can center it by changing it's left position by increments of 960 (placing the long div in relative positioning and the window to overflow to hidden)

#window{
width:960px;
overflow: hidden;
}

#container{
position: relative;
left: -960px;
}

.content_box{
width:960px;
}

Then you can use javascript (jQuery) to animate the left position:

$('#arrow-left').click(function() {
  $('#container').animate({
   left: '-=960'
  }, 5000, function() {
  // Animation complete.
  });
});


$('#arrow-right').click(function() {
  $('#container').animate({
   left: '+=960'
  }, 5000, function() {
  // Animation complete.
  });
});

More on .animate can be found in the manual: http://api.jquery.com/animate/