JQuery 滑块空间“溢出”答案

【问题标题】：JQuery slider space "overflow"JQuery 滑块空间“溢出”
【发布时间】：2012-10-13 22:23:36
【问题描述】：

我正在创建自己的第一个 JQuery 滑块，而且我已经走了很长一段路。

我想要什么：

当你点击“下一步”按钮时，我的滑块Image2会被设置在滑块div的左边，而image1在里面。 Image1 将一直滚动（动画）到滑块 div 的右侧。一旦 Image2 现在设置在 div 中，image1 的 z-index 将设置为低于 image1，因此它可以低于它。现在image1也进入了div里面的image2下面，可以重复这个过程了。

我有什么（问题）：

我几乎完成了上述操作，但是在滑动/动画时，图像有时会超出 div。我确保没有一个 div 有任何奇怪的边距/填充。滑块 div 和图像都具有相同的宽度 (1050) 和高度 (230)。

代码：

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

我真的不知道是什么导致了多余的空间。另外，如果有任何编码错误，请告知；我和这里的每个人一样处于学习过程中=）

【问题讨论】：

标签： jquery

【解决方案1】：

我发现了问题：

Image1的动画比Image2的动画更早完成，所以遇到这段代码时：

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

在 image2 完成动画的时候，它需要很少的像素距离。

新问题：

在将位置设置为 image2 之前，如何确保 image2 已完成动画？

【讨论】：