html - ボタンがクリックされるたびにdivの位置を変更する

Question

3 つの異なる 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.
});
});