Jquery使用溢出隱藏約束的包裝內動畫

我的問題對我來說有點棘手，所以我會盡量準確和清晰。我有一個名爲「包裝」的div。在該div中，我有一個名爲「contentWrapper」的div，它的寬度比「wrapper」大。「包裝器」的溢出隱藏。「contentWrapper」包含四個div。當其中一個div被點擊時，我想讓「contentWrapper」向左移200px。Jquery使用溢出隱藏約束的包裝內動畫

與我的代碼它不起作用。如果我把一個位置：絕對的「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"); 

});

來源

2012-01-24 Marc

看看這個jsFiddle。

這不是您期望的行爲嗎？

來源

2012-01-24 22:48:27 Kypros

是Kypros，正是這個！你讓我平靜下來。非常感謝！！ – Marc

很高興我能幫到你。祝你好運。 – Kypros

溢出：隱藏爲我做的伎倆。 – user10

你可能想嘗試一個位置：絕對; #wrapper上。

你希望各個內容區域彼此相鄰，對嗎？如果是這種情況，您可能需要一個位置：.content上的相對位置，以便float：left工作。

來源

2012-01-24 23:00:22 nosarious

你好，沒事。一個位置：相對於#contentWrapper「，正如Kypros提出的那樣。感謝您抽出時間來幫助我。 – Marc

Jquery使用溢出隱藏約束的包裝內動畫

回答

相關問題