I am trying to make a simple animation function in jquery

Question

I am trying to animate a div , I need it when I click a button . I want to hide a div and show another div, which is the next child.

here is my fiddle .

I try to do this: you can see this site here, when you click on the learore link, which is in the upper right part, then another div content opens as a moving one.

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

If you have a certain number of slides, you can keep the code intact, on the other hand, I suggest you - when the last slide is reached - hide the #learn program code using jQuery. Let me know if you need help with this.

Happy coding

Answer 2

Would something like this suffice:

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

You can change identifiers as needed.

EDIT

Check out this script: http://jsfiddle.net/MR5yv/1/

EDIT No. 2

Check out this script: http://jsfiddle.net/MR5yv/2/