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）

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

同一动画在不同方向上花费的时间更长

1 个答案: