Question

I built slider that makes use of jQuery’s animate. The slides should move to the left and to the right.
Sometimes the animation is imprecise by 1 Pixel. Let’s say it should slide to 0 Pixels from left but it stops at 1 Pixel. At least in Google Chrome I experience this problem.
Why is that and how can I prevent it?

Here’s the function:

var faces_width = 414;

function facebox_next (id) {
    var index = parseInt($(id).attr("index"));
    index++;
    if(index <= $(id).children("img").size()-1) {
        $(id).attr("index",index);
        $(id).animate({
            "left":-faces_width*index
        },300);
        //$(id).css("left",-faces_width*index);
    }
}

function facebox_prev (id) {
    var index = parseInt($(id).attr("index"));
    index--;
    if(index >= 0) {
        $(id).attr("index",index);
        $(id).animate({
            "left":-faces_width*index
        },300);
        //$(id).css("left",-faces_width*index);
    }
}

Fiddle: http://jsfiddle.net/vXYdu/

Answer 1

I would just change the facechanger div to 1px smaller width, that solved the problem for me

div#facechanger {position:relative; height:542px; margin:32px 0;width:540px}