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

i am trying to do simple animate function in jquery

本文关键字：简单 动画 功能 jquery      更新时间：2023-09-26

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

是我的fiddle。

我正在尝试这样做这个网站你可以看到当你点击learmore链接时它在右上角然后另一个div内容像滑动一样打开

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

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

快乐编码

这样就够了吗:

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

您可以根据需要更改id。

编辑

检查此提琴:http://jsfiddle.net/MR5yv/1/

编辑# 2

检查此提琴:http://jsfiddle.net/MR5yv/2/

相关文章：