JQuery 旋转木马是跳跃的

Question

轮播在过渡时会略微移动/跳跃，我不确定出了什么问题。

$(".timer").css("display");
$(".timer:gt(5)").css("display", "none");
function move_first() {
    //console.debug("animate");
    $(".timer").eq(0).stop().animate({
        opacity: 0.00,
        width: "toggle"
    }, 500, function() {
        $(this).insertAfter($(".timer").eq(-1));
        $(this).css('opacity', '1');
        $(".timer").eq(5).animate({
            opacity: 1.00,
            width: "toggle"
        }, 500, function() {
            $(".timer").css("display");
            $(".timer:gt(5)").css("display", "none");
        });
    });
    setTimeout(move_first, 3000);
}
move_first();

这是jsfiddle的链接：跳跃旋转木马

有什么想法吗？

Answer 1

ul元素之间有间距。这是由 HTML 中的任何空格引起的。例如，您可以通过消除 HTML 中的所有换行符来消除它。由于这显然是不可能的，因此最好通过将其大小设置为零来简单地消除间距。由于间距在技术上是由字体引起的，因此我们可以使用 font-size: 0; .您可以通过将以下内容添加到 CSS 中来执行此操作：

#carousel-images ul {
    font-size:0;
}

当然，最好给你的ul一个ID并在CSS中引用该选择器。如果您仍然希望元素之间的间距，则可以使用边距和填充来完成此操作。

#carousel-images ul li {
    margin-right:10px;
}

编辑：我看到这个问题已经回答了。棒！我还添加了一个示例解决方案来保留一些空白。

Answer 2

元素

之间的空格也被计算在内，并提供错误的宽度计算。您可以通过添加以下内容来更正它：

ul { font-size: 0; }

小提琴：http://jsfiddle.net/uqt8kbxm/2/

参考：与内联块元素之间的空间作斗争