带有溢出隐藏约束的 Jquery 在包装器内部进行动画处理

Posted 2023-05-08

【中文标题】带有溢出隐藏约束的 Jquery 在包装器内部进行动画处理

【英文标题】：Jquery animate inside wrappers with an overflow hidden constraint

【发布时间】：2012-02-18 04:42:48

【问题描述】：

我的问题对我来说有点棘手，所以我会尽量做到准确和清楚。我有一个名为“包装器”的 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");

);

【参考方案1】：

看看这个jsFiddle。

这不是您所期望的行为吗？

【讨论】：

是的，Kypros，正是这个！你让我度过了一个美好的夜晚。非常感谢！！

很高兴我能帮上忙。祝你好运。

【参考方案2】：

您可能想尝试一个职位：绝对；在#wrapper 上。

您希望各个内容区域彼此相邻，对吗？如果是这种情况，您可能需要一个 position:relative on .content 以便 float:left 起作用。

【讨论】：

你好，noasrious。根据 Kypros 的建议，一个职位：相对于 #contentWrapper" 达成了交易。无论如何，感谢您抽出时间来帮助我。