javascript - 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 的链接:Jumpy Carousel

有什么想法吗？

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

编辑:我看到问题已经得到解答。惊人的!我还添加了一个示例解决方案来保留一些空白。