Question

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

这是我的fiddle。

我正在尝试这样做this site，您可以在此处点击右上角的 learmore 链接，然后打开另一个div内容，例如滑动。< / p>

Answer 1

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。如果您需要帮助，请告诉我。

快乐编码

Answer 2

这样的事情就足够了：

$('#divtohide').fadeOut('slow', function() {
  $('#divtoshow').fadeIn('slow');
});

您可以根据需要更改ID。

修改

检查这个小提琴：http://jsfiddle.net/MR5yv/1/

编辑＃2

检查这个小提琴：http://jsfiddle.net/MR5yv/2/

我试图在jquery中做简单的动画功能

2 个答案: