html - 每次单击按钮时更改 div 的位置

Question

我正在尝试构建一个包含三个不同 div 的 div 容器。当我单击图像时，容器 div 应该完全滑动。那么可能改变它的利润率？

图像是指向左右的箭头。

例如：

<div id = "container">
   <div id = "content1">This is the content1</div>
   <div id = "content2">This is the content2</div>
   <div id = "content3">This is the content3</div>
</div>

<div id ="buttonLeft">path/of/imageLeft</div>
<div id ="buttonReft">path/of/imageRight</div>  

我已将容器放入尺寸设置为 1024x768 像素的包装器中。容器具有相同的尺寸，现在只显示第一个内容，但我希望它在单击按钮时改变位置。

我应该为此尝试 Jquery 吗？或者你有什么推荐的？

我已经尝试过 slideToggle 但这并不是我想要的，尽管缓动非常适合设计。

目前我有这个，但它不工作：

$('#leftarrow').click(function() {
$('#content').animate({
marginLeft: -200px
}, 5000, function() {
// Animation complete.
});
});