javascript - 我怎样才能向右滑动一个div，让它看起来像从div后面滑出来

Question

好的，我有一个 div，其中有几个链接。现在我希望所有这些链接都能使同一个 div 从左侧向右侧滑动。从我所做的研究看来，我应该使用 Jquery 的动画功能。问题是我还没有看到任何可以做我想做的事的例子。这些是 div 中的链接。

#holder {
  width: 100%;
  height: 100%
}
.select {
  font-size: 175%;
  background-color: clear;
  width: 15%;
  padding: 5px;
}
.catselect {
  text-decoration: none
}
#categories {
  font-weight: 800;
  position: absolute;
  top: .25%;
  left: 2%;
}
#myHeader1 {
  position: absolute;
  top: 7%;
  left: 3%;
}
#myHeader2 {
  position: absolute;
  top: 11.5%;
  left: 3%;
}
#myHeader3 {
  position: absolute;
  top: 16%;
  left: 3%;
}

<div id="holder">
  <h1 id="categories">Categories</h1>
  <div class="select">
    <a id="myHeader1" class="catselect" href="#">Comedy</a>
  </div>

  <div class="select">
    <a id="myHeader2" class="catselect" href="#">Horror</a>
  </div>

  <div class="select">
    <a id="myHeader3" class="catselect" href="#">Action</a>
  </div>
</div>

编辑我想要一个单独的 div 滑动到链接所在的 div 的右侧，并且我希望通过单击链接来触发此操作。

Answer 1

不确定这是否是您想要的，但如果您的意思是它从左侧滑入，您可以使用 CSS 在悬停时实现这一点 JSFiddle

#holder {
  width: 200px;
  height: 100%;
  background-color: yellow;
  position: relative;
  left: -170px;
  -webkit-transition: left 1s;
  transition: left 1s;
  cursor:pointer;
}
#holder:hover {
  left: 0;
  -webkit-transition: left 1s;
  transition: left 1s
}
.select {
  font-size: 175%;
  background-color: clear;
  width: 15%;
  padding: 5px;
}
.catselect {
  text-decoration: none
}
#categories {
  font-weight: 800;
  top: .25%;
  left: 2%;
}
#myHeader1 {
  top: 7%;
  left: 3%;
}
#myHeader2 {
  top: 11.5%;
  left: 3%;
}
#myHeader3 {
  top: 16%;
  left: 3%;
}

<div id="holder">
  <h1 id="categories">Categories</h1>

  <div class="select"> <a id="myHeader1" class="catselect" href="#">Comedy</a>

  </div>
  <div class="select"> <a id="myHeader2" class="catselect" href="#r">Horror</a>

  </div>
  <div class="select"> <a id="myHeader3" class="catselect" href="#">Action</a>

  </div>
</div>

根据评论更新:

如果你检查这个JSFiddle ，虽然你要求的可以用纯 css 完成，但它不会给出完美的效果，有几个 javascript 留置权，最初所有 .data-div 都在 View 窗口之外，因为用户单击其中一个链接，所有这些 div - 如果 View 中有 - 在我们添加过渡类时滑出 View .slide- out 给他们，然后我们选择用户点击的特定链接的 href 值，并使用它来寻址相应的 div 并删除 。 slide-out 类，然后添加一个 .slide-in 类并过渡到它，使其滑入 View 。

$('.catselect').on('click', function(e){
	e.preventDefault();
    var type = $(this).attr('href');
    $('.data-div').removeClass('slide-in').addClass('slide-out');
	$(type).removeClass('slide-out').addClass('slide-in');
});

.menu-icon {
    width:30px;
    height:30px;
    background-image:url('https://cdn2.iconfinder.com/data/icons/ui-icon-part-2/128/menu_hamburger-128.png');
    background-size:30px 30px;
    display:inline-block;
    position:relative;
    left:10px;
    top:5px;
    cursor:pointer;
}
#holder {
    border-right:10px maroon solid;
    width: 200px;
    height: 100%;
    background-color:#999;
    position:relative;
    left:-170px;
    -webkit-transition: left 1s;
    transition: left 1s;
    z-index:10;
    box-shadow:1px 3px 5px rgba(0, 0, 0, 0.7);
}
#holder:hover {
    left:0;
    -webkit-transition: left 1s;
    transition: left 1s
}
#holder h1 {
    margin-left:10px;
}
#categories {
    font-weight: 800;
    top: .25%;
    left: 2%;
}
#holder .select {
    width:100%;
    margin-right:5px;
    font-size: 175%;
    border-bottom:dotted #888 1px;
}
#holder .select a {
    color:#222;
    left: 3%;
    text-align:center;
    display:block;
    padding:3px 0;
    text-decoration:none;
}
#holder .select a:hover {
    color:#E0E0E0;
    background-color:maroon;
}
.data-div {
    width:calc(100% - 80px);
    height:auto;
    padding:5px;
    position:absolute;
    top:22px; /* enter this manually because it depends on the #holder menu height */
    left:-100%;
    transition: left 1s ease-in;
    background-color:#EEE;
}
.data-div h2{text-align:center;}
.slide-in{
    left:50px;
    -webkit-transition:left .7s ease-in;
    transition:left .7s ease-in;
}
.slide-out{
    left:-100%;
    -webkit-transition:left .5s ease-out;
    transition:left .5s ease-out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="holder">
     <h1 id="categories">Categories<i class="menu-icon"></i></h1>

    <div class="select"> <a class="catselect" href="#comedy">Comedy</a>

    </div>
    <div class="select"> <a class="catselect" href="#horror">Horror</a>

    </div>
    <div class="select"> <a class="catselect" href="#action">Action</a>

    </div>
</div>
<div id="data-container"></div>
<div id="comedy" class="data-div"><h2>Comedy Data</h2><p>Caffeine irish breve kopi-luwak grounds at pumpkin spice. Cinnamon arabica caffeine a mazagran siphon aroma acerbic. Sit french press seasonal id decaffeinated so trifecta. And doppio decaffeinated, galão cup grounds robusta irish black steamed.
</p><p>
Organic, rich, cup galão black caffeine filter. Aroma, whipped, so con panna organic java mocha. Turkish, cinnamon plunger pot rich pumpkin spice frappuccino caramelization. Spoon bar caramelization coffee iced, robust cup doppio id mug galão.
</p><p>
In acerbic, wings mocha robust qui sugar so as at beans ristretto. Flavour et, est sit frappuccino plunger pot doppio. Body, in saucer plunger pot macchiato lungo frappuccino irish shop. Fair trade, affogato irish coffee to go extraction single origin at dark blue mountain acerbic.</p></div>
<div id="horror" class="data-div"><h2>Horror Data</h2><p>Cortado con panna, as strong, et, grinder milk, caramelization instant flavour galão single shot. Barista bar, strong caramelization cappuccino java robusta foam kopi-luwak. Cream in seasonal, cappuccino, siphon sugar shop qui id crema. Milk, cup sit coffee grounds affogato sweet acerbic.
</p><p>
Mazagran, carajillo grounds java, acerbic, qui aftertaste brewed espresso crema. So frappuccino variety, turkish, beans, mug blue mountain galão strong robusta irish affogato. Skinny irish, french press caramelization qui barista cream. Filter, extra ut cup mug steamed cream that foam.
</p><p>
Mocha, extraction, coffee cream seasonal a shop sweet foam. Carajillo, sit carajillo redeye in extraction, black robust turkish redeye grounds. Cinnamon cream skinny id mocha half and half cappuccino trifecta milk french press arabica. Cinnamon trifecta spoon espresso siphon plunger pot black.
</p><p>
Arabica seasonal medium froth trifecta grinder single origin. And, at, eu, single shot froth cortado, plunger pot so et sugar medium. Sweet blue mountain eu java rich eu instant fair trade redeye. Coffee café au lait single shot, filter acerbic doppio roast dripper turkish shop ristretto skinny.
</p><p>
Lungo grounds, decaffeinated barista brewed bar and robust crema lungo. Mug arabica, viennese café au lait turkish roast sit est plunger pot. Lungo, java decaffeinated sit wings robust cream latte sugar crema strong. Java con panna, mug iced extra dripper single shot kopi-luwak organic.
</p><p>
Milk seasonal frappuccino variety, galão americano, white spoon beans irish coffee. Steamed single origin half and half, blue mountain mug carajillo foam lungo est macchiato. Filter, single shot siphon cup frappuccino lungo grounds. Plunger pot, at americano skinny bar brewed redeye.</p></div>
<div id="action" class="data-div"><h2>Action Data</h2><p>That, skinny, black, strong seasonal ristretto aged lungo. Black, eu robust single origin to go black froth blue mountain cinnamon wings. Dripper fair trade dark barista foam arabica strong. Skinny organic, french press americano, body con panna siphon aroma flavour.
</p><p>
Breve redeye, dark, sugar strong mug doppio plunger pot breve. Shop, turkish strong variety cinnamon mocha at chicory redeye cream strong aroma. Wings macchiato, at coffee acerbic galão seasonal cinnamon variety. Cup caffeine et at brewed con panna mocha et dark.</p></div>