同一個動畫在不同的方向需要更長的時間

Question

我有一個圖像滑塊，它會轉到下一個/上一個圖像。

問題是，當您單擊上一圖像按鈕時，動畫比單擊下一個圖像按鈕所需的時間更長，並且兩者的動畫都相同！

你能告訴我爲什麼會發生這種情況？

的jsfiddle：
http://jsfiddle.net/v6d16jza/

HTML：

<div id="slider"> 
      <div id="setas-navegacao" style="position:absolute;height:100%;width:100%;"> 
       <i class="sprite-slider_ant" style="z-index:1;position:absolute;left:1.7%;top:50%;color:#ffa500;font-size:15pt;"><</i> 
       <i class="sprite-slider_prox" style="z-index:1;position:absolute;right:68.5%;top:50%;color:#ffa500;font-size:15pt;">></i> 
      </div> 
      <div class="slide slide_ativo" style="background-image:url('http://www.hdwallpapersimages.com/wp-content/uploads/2014/01/Winter-Tiger-Wild-Cat-Images-540x303.jpg');"> 

      </div> 

      <div class="slide" style="background-image:url('http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg');"> 

      </div> 

      <div class="slide" style="background-image:url('http://7-themes.com/data_images/out/42/6914793-tropical-beach-images.jpg');"> 

      </div> 
     </div> 

CSS：

html{ 
    overflow: hidden; 
    width:100%; 
} 
div#slider{ 
    position:relative; 
    overflow: hidden; 
    width: 300%; 
    height:300px; 
} 

.slide{ 
    position:relative; 
    width:33.3%; 
    height:100%; 
    float:left; 
    background-size: cover; 
    -webkit-transform: translateZ(0); 
    -webkit-transition: margin-left 0.9s ease-out; 
    -moz-transition: margin-left 0.9s ease-out; 
    -o-transition: margin-left 0.9s ease-out; 
    transition: margin-left 0.9s ease-out; 
} 

的jQuery：

$(".sprite-slider_prox").on("click", function(){ 
    if($(".slide_ativo").next().is(".slide")){ 
     $(".slide_ativo").css("margin-left", "-100%").removeClass("slide_ativo").next().addClass("slide_ativo"); 
    } 
}); 

$(".sprite-slider_ant").on("click", function(){ 
    if($(".slide_ativo").prev().is(".slide")){ 
     $(".slide_ativo").removeClass("slide_ativo").prev().css("margin-left", "0%").addClass("slide_ativo"); 
    } 
}); 

Answer 1

你增加更多的保證金比它實際上是需要轉變圖像在左邊。

您可以看到Chrome檢查器發生了什麼，在圖像發生更改時將其懸停（將動畫時間提高到更高的值會對您有所幫助）。您會注意到滑塊開始向後移動之前的延遲花費了刪除額外的餘量。

我記錄了調試的一個video。

如果更改：

.css("margin-left", "-100%") 

到：

.css("margin-left", "-33.333%") 

動畫將正常工作（見fiddle）

另外請注意，我不得不刪除padding和margin從html和body元素來實現正確的換檔。