css - Trying to create a jQuery image rotator but can only get the first half of it to work -

I am trying to create an image rotator where an image will fade on the next and so on until it does not return The first image I got the first two images that worked correctly, but the remaining 3 did not fade correctly, they just jumped into the scene.

I know that I should still have an account to reach the end of the rotation. I have not taken care of it yet because I am just trying to get the rotation of the first round to work.

What is missing me to work it correctly?

My HTML:

  & lt; Div id = "imageRotator" & gt; & Lt; Div id = "image01" class = "on" & gt; & Lt; Img src = "picture / image rotate 01.jpg" & gt; & Lt; / Div & gt; & Lt; Div id = "image02" class = "next" & gt; & Lt; Img src = "image / image rotate 02.jpg" & gt; & Lt; / Div & gt; & Lt; Div id = "image03" class = "hidden" & gt; & Lt; Img src = "picture / image rotate 03.jpg" & gt; & Lt; / Div & gt; & Lt; Div id = "image04" class = "hidden" & gt; & Lt; Img src = "picture / image rotate 04.jpg" & gt; & Lt; / Div & gt; & Lt; Div id = "image05" class = "hidden" & gt; & Lt; Img src = "image / image rotate 05.jpg" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 My CSS:  
  #imageRotator div {status: absolute; } .current {z-index: 1; } .next {z-index: 0; } .hidden {z-index: -1; }   
 My jQuery:  
  $ (document) .ready (function () {var firstImage = $ ('# image01'); var current image , Next image; set interval (rotate images, 2000); function rotate images (current image = $ ('div courant'); next image = $ ('div nxt'); 0}, 2000, function () {CurrentImage.removeClass ('current');}); // Bring the second image to the next scene. Image. Animate ({Opacity: 1}, 2000, Function () {// Create New AddClass ('next'), image the current image next image. Revoke class ('Next'). AddClass ('current'); // rotation The next image in the 'Next' image is created next image. () AddClass ('Next'). RemoveClass ('hidden');}); }});    
 
 
 You have not set zero  opacity  by default Therefore there is no animation for  opacity  for the first elements, try setting it on 0 on all elements but first and see what happens.  
  #imageRotator div {position: absolute; Width: 30px; Height: 30px; Profile: 1px solid red; Background: Red; Opacity: 0; } #imageRotator div: First-Kids {Opacity: 1; } .current {z-index: 1; } .next {z-index: 0; } .hidden {z-index: -1; }   
 Demo: