Jqueryオーバーフローの隠し制約付きラッパーのアニメーション

Question

私の問題は私にとっては少しトリッキーなので、私は正確かつ明確にしようとします。私は "ラッパー"と呼ばれるdivを持っています。そのdivには "contentWrapper"というdivがあり、 "wrapper"よりも大きな幅を持っています。 「ラッパー」のオーバーフローは隠されています。 "contentWrapper"には4つのdivが含まれます。これらのdivの1つがクリックされると、 "contentWrapper"が200ピクセル左に移動します。

私のコードでは動作しません。ポジションを置いた場合、絶対に "contentWrapper"にアニメーションは動作しますが、オーバーフローはもう隠されません...誰かが助けてくれることを願っています。あなたの返信を先にありがとう。乾杯。マーク

マイHTML：

<div id="wrapper"> 
     <div id="contentWrapper"> 
      <div id="contentOne" class="content">This is contentOne</div> 
      <div id="contentTwo" class="content">This is contentTwo</div> 
      <div id="contentThree" class="content">This is contentThree</div> 
      <div id="contentFour" class="content">This is contentFour</div> 
    </div> 
</div> 

マイCSS：

#wrapper{ 
    width:960px; 
    height:auto; 
    margin:0 auto; 
    background-color:rgba(238,221,130,0.6); 
    border:5px solid purple; 
    overflow:hidden;} 

#contentWrapper{ 
    width:1910px; 
    height:auto; 
    background-color:rgba(70,130,180,0.4); 
    float:left;} 

.content{ 
    width:465px; 
    height:auto; 
    margin:10px 0 10px 10px; 
    padding:0; 
    background-color:rgba(205,92,92,0.4); 
    float:left;} 

マイJS：

$('.content').click(function() { 

    $('#contentWrapper').animate({ 
     "left": "-=200px" 
    }, "fast"); 

}); 

Answer 1

このjsFiddleをチェックしてください。

これは期待した動作ではありませんか？

Answer 2

ポジションを試してみるとよいでしょう：絶対; #wrapperで。

さまざまなコンテンツ領域を互いに横にしたいのですが、そうである場合は、position：相対的な.contentの位置が必要なので、float：leftが機能するようにします。