javascript - Same animation is taking longer in different directions -

i have image slider, it's going next/previous image fine.

problem when click previous image button, animation takes longer when click in next image button, , animation same both!

can tell me why happening?

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

you adding more margin it's needed shift image left.

you can see what's happening chrome inspector, hovering images while change (raising animation time higher value you). notice delay before slider starts moving spent removing margin.

i recorded video of debugging.

if change:

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

to:

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

the animation work correctly (see fiddle)

also, note had remove padding , margin html , body elements achieve correct shifting.