jquery - 查询：2个div左右滑动

Question

我有这个 html

<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应显示 Onload。现在我想点击a#show-slide2并且#slide2应该从右边滑入。

我需要什么 CSS 和 JS？

Answer 1

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

});