javascript - 相同的动画在不同的方向上花费的时间更长

Question

我有一个图片 slider ，它可以很好地移动到下一张/上一张图片。

问题是当你点击上一张图片按钮时，动画比你点击下一张图片按钮时的动画时间更长，而且两者的动画是一样的!

你能告诉我这是为什么吗发生了什么？

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 检查器查看正在发生的情况，在图像发生变化时悬停图像(将动画时间提高到某个更高的值会对您有所帮助)。您会注意到 slider 开始向后移动之前的延迟被用于移除额外的边距。

我记录了一个video的调试。

如果你改变:

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

到:

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

动画将正常工作(参见 fiddle)

另外，请注意，我必须从 html 和 body 元素中移除填充和边距以实现正确的移动。