javascript - 我正在尝试在 jquery 中做简单的动画功能

Question

我正在尝试为 div 设置动画，我需要的是当单击按钮 时我想隐藏一个 div 并显示下一个子项的另一个 div。

这是我的 fiddle .

我正在尝试这样做 this site在这里你可以看到，当你点击右上角的 learmore 链接时，另一个 div 内容会像滑动一样打开。

Answer 1

DEMO jsBin

var c=0;
$('.slide:gt(0)').hide();
$('#learn').click(function(){
  c++;
  $('.slide').eq(c).css({zIndex:c}).show('slow');
});

HTML:

  <div id="slider">
    <div id="learn">Learn more</div>
    <div class="slide s1">I'm slide 1</div>
    <div class="slide s2">I'm slide 2</div>
    <div class="slide s3">I'm slide 3</div>
  </div>

CSS:

  #slider{
    position:relative;
    width:340px;
    height:340px;
  }
  #learn{
    position:absolute;
    right:0px;
    z-index:2;          /*set a higher Z-index if you have more slides*/
    cursor:pointer;
  }
  .slide{
    position:absolute;
    right:0px;         /*important!! To 'slide' from right to left*/
    top:0px;           
    width:300px;
    height:300px;
  }

如果您有定义数量的幻灯片，您可以保持代码完整，另一方面，我建议您 - 当到达最后一张幻灯片时 - 使用 jQuery 以编程方式隐藏#learn。如果您需要这方面的帮助，请告诉我。

快乐编码