2

私はこの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が表示されます。今、私はクリックしたいので、右からスライドインする必要がa#show-slide2あります.#slide2

どの CSS と JS が必要ですか?

4

1 に答える 1

2

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-20T17:50:02.080 に答える