JQuery滑塊空間「overflow」

我正在創建自己的第一個自己的JQuery滑塊，而且我已經走過了一條很遠的路。JQuery滑塊空間「overflow」

我想要什麼：

當您點擊我的滑蓋裏面的「下一步」按鈕鏡像2將被設置爲滑塊div的左側，此搜索。 Image1將滾動（動畫）一直到滑塊div外部的右側。一旦Image2被設置在div中，image1的z-index將被設置爲低於image1，因此它可以低於它。現在image1也在div的image2下面，並且可以重複該過程。

我有什麼（存在的問題）：

我幾乎做上述，但圖像有時會走得太遠股利外滑動/動畫時。我確信沒有任何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); 
    } 
}

我簡直不知道什麼導致多餘的空間。如果有什麼是嚴重的編碼，請告訴;我在喜歡這裏每個人都是一個學習的過程=）

來源

2012-10-23 user1534664

我發現這個問題：

圖像1的動畫更早結束比鏡像2的動畫，所以當它遇到這樣的代碼：

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

在image2完成動畫處理的時間裏，它需要很少的像素距離。

新的問題：

我怎麼能確保圖像2做動畫之前，我設置爲鏡像2的位置？

來源

2012-10-23 22:03:29 user1534664

JQuery滑塊空間「overflow」

回答

相關問題