Question

My problem is a little tricky for me so I will try to be precise and clear. I have a div called “wrapper”. In that div I have a div called “contentWrapper” which has a larger width than “wrapper”. The overflow for “wrapper” is hidden. “contentWrapper” contains four div. When one of those div is clicked I want “contentWrapper” to move 200px to the left.

With my code it is not working. If I put a position:absolute to “contentWrapper” the animation works but the overflow is not hidden anymore… I hope someone can help. Thank you in advance for your replies. Cheers. Marc.

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

My 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;}

My JS :

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

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

});

Answer 1

Check out this jsFiddle.

Isn’t this the behavior you expect?