JQuery carousel is jumpy

Question

The carousel shifts/jumps slightly when it transitions and I'm not sure what's wrong.

$(".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();

Here's the link to the jsfiddle: Jumpy Carousel

Any ideas?

Answer 1

There is spacing between your ul elements. This is caused by any white space in your HTML. For example, you may be able to eliminate it by eliminating all line breaks in your HTML. Since this is obviously not possible, it may be best to simply get rid of the spacing by making it of size zero. Since the spacing is technically caused by a font, we can use font-size: 0;. You can do this by adding the following to your CSS:

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

Of course it may be better to give your ul an ID and reference that selector in your CSS. IF you still want spacing between the elements, you can use margins and padding to accomplish this.

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

Edit: I see the question has been answered already. Awesome! I've also added an example solution to keeping some white space.

Answer 2

White space between elements is also counted and provide wrong width calculation. You could correct it by adding:

ul { font-size: 0; }

Fiddle: http://jsfiddle.net/uqt8kbxm/2/

Reference: Fighting the Space Between Inline Block Elements