Question

我的问题对我来说有点棘手，所以我会尽量准确而清晰。我有一个叫做“包装”的div。在那个div中我有一个名为“contentWrapper”的div，其宽度大于“wrapper”。隐藏“包装器”的溢出。 “contentWrapper”包含四个div。当点击其中一个div时，我希望“contentWrapper”向左移动200px。

我的代码无效。如果我把一个位置：绝对的“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上。

您希望各个内容区域彼此相邻，对吗？如果是这种情况，你可能需要一个位置：相对于.content，所以float：left工作。

Jquery使用溢出隐藏约束在包装器内设置动画

2 个答案: