查詢：2周的div滑動左/右

我有這個網站查詢：2周的div滑動左/右

<div id="container"> 
    <div id="slide"> 
     <div id="slide1"> 
      Content 1 
      <a href="#" id="show-slide2">Show Content 2</a> 
     </div> 
     <div id="slide2"> 
      Content 2 
     </div> 
    </div> 
</div>

#container有max-width:1250px。僅載入#slide1應顯示。現在我想點擊a#show-slide2和#slide2應該從右側滑入。

我需要什麼CSS和JS？

來源

2013-04-20 sugo

這是否意味着你不知道如何構建CSS？你有沒有嘗試過什麼？ – 2013-04-20 17:42:08

這是一個[示例]（http://jsfiddle.net/RyDuK/）。 – Vucko 2013-04-20 17:52:34

我嘗試了很多，但沒有任何工作，所以我決定發佈沒有我的嘗試;-)問題始終是100％的寬度。 Thanx，roXon，爲您的解決方案。 – sugo 2013-04-20 17:58:18

LIVE DEMO

HTML

<div id="slides"> 
    <div> 
    Content 1 
    <a href="#" id="show-slide2">Show Content 2</a> 
    </div> 
    <div> 
    Content 2 
    </div> 
</div>

CSS：

#slides{ 
    position:relative; 
    overflow:hidden; 
    margin:0 auto; 
    background:#cf5; 
    width:400px; 
    height:200px; 
    white-space:nowrap; 
} 
#slides div{ 
    position:relative; 
    display:inline-block; 
    margin-right:-4px; 
    white-space:normal; 
    vertical-align:top; 
    *display:inline; 
    background:#eee; 
    width:400px; 
    height:200px; 
}

的jQuery：

$(function(){ 

    var slideW = $('#slides').width(); 
    $('#show-slide2').click(function(e){ 
    e.preventDefault(); 
    $('#slides').animate({scrollLeft: slideW }, 600); 
    }); 

});

來源

2013-04-20 17:50:02

查詢：2周的div滑動左/右

回答

相關問題