Question

I’m creating my first own JQuery slider, and I’ve come a far way.

What I want:

When you click on the “Next” Button in my slider Image2 will be set to the left of the slider div, and image1 inside. Image1 will scroll (animate) all the way to the right outside the slider div. Once Image2 is now set inside the div, image1’s z-index will be set lower than image1 so it can go below it. Now image1 goes under image2 inside the div as well, and the process can be repeated.

What I have (The Problem):

I pretty much made the above, but the image will SOMETIMES go too far outside the div when sliding/animating. I’ve made sure none of the divs have any weird margins/paddings. The slider div and the images all have the same width (1050) and height (230).

The code:

function SlideRight(){
   if (!$("#IMAGE1").is(':animated') || $("IMAGE2").is(':animated')){

      if(counter == images.length - 1){
         counter = -1;
      }

      if(IsImageOneSet){    
         Image2.src=images[counter + 1];
         $("#IMAGE2").css('left', $("#IMAGE2").position().left-1050);
         $("#IMAGE1").animate({
            "left": "+=1050px", 
            queue: false
         }, "slow", function(){
            $("#IMAGE1").css('left', $('#IMAGE2').position().left);
            $("#IMAGE1").css('z-index', '0');
            $("#IMAGE2").css('z-index', '1');
            $("#Next").bind('click');
         });
         $("#IMAGE2").animate({"left": "+=1050px", queue: false}, "slow");  

      } else {
         Image1.src = images[counter + 1];      
         $("#IMAGE1").css('left', $("#IMAGE1").position().left-1050);
         $("#IMAGE2").animate({
            "left": "+=1050px",
            queue: false
         }, "slow", function(){
             $("#IMAGE2").css('left', $('#IMAGE1').position().left);
             $("#IMAGE1").css('z-index', '1');
             $("#IMAGE2").css('z-index', '0');
             $("#Next").bind('click');
         });
         $("#IMAGE1").animate({"left": "+=1050px", queue: false}, "slow");
      }

      counter++;
      IsImageOneSet = !IsImageOneSet;   
      window.clearInterval(interval);
      interval = window.setInterval(SliderInterval, 7000);
   }
}

I literally have no clue whats causing the superfluous space. Also if anything is badly coded, please tell; I’m in a learning process like everyone here is =)

Answer 1

I found the problem:

The animation of Image1 was finished earlier than the animation of Image2, so when it comes across this code:

$("#IMAGE1").css('left', $('#IMAGE2').position().left);

It would take a very few pixels distance in the time that image2 is done animating.

New problem:

How can I make sure that image2 is done animating before I set the position to image2?