Question

I recently started using JQuery and created a little slider to display logos of website sponsors and such. It seemed to be working properly for me using Firefox. I decided to load up the site in Chrome and it behaves rather strange. The animation seems fine until the first div(the slider is split into two divs, so that the first can move to the end once it has completed it’s pass through the masking div) enters the screen for the second(and each concurrent) pass. The first div seems to move more rapidly, and overtakes the second div. Any ideas what would cause this? It only seems to happen in Chrome and Safari. IE worked even!

$(document).ready(function () {
var s1 = $("div[name=s1]");
var s2 = $("div[name=s2]");
var release = 0;
var speed = 75; //px per sec
var interval = 100; //milliseconds per animation
var origSpeed = speed;

function slide() {
    release = 1 - release;
    if (release == 0) {
        return;
    }
    distance = "+=" + (parseInt(s1.width(), 10) + parseInt(s2.width(), 10)) + "px";
    if ((-1 * parseInt(s1.css("left"), 10)) > parseInt(s1.width(), 10)) {
        s1.css({left: distance});
    }
    if ((-1 * parseInt(s2.css("left"), 10)) > (parseInt(s1.width(), 10) + parseInt(s2.width(), 10))) {
        s2.css({left: distance});
    }
    slide_again();
}

function slide_again() {
    $("div[id=slider]").animate({left: "-=" + interval * (speed / 1000) + "px"}, interval, "linear", slide);
}

    $("div[id=slider]").hover(function() {
    speed = 0;
    }, function() {
        speed = origSpeed;
    });

    slide();
});

You can see it in action here

Answer 1

Animation depends on timed interrupts. There is no guarantee of exact timings, and so depending on implementation, the timing of your two sliders may diverge.

If you just use one slider element, you won’t run into that issue. It also simplifies the code quite a bit. The way to do this is to replicate your slider elements (using jQuery) and then animate half the width (the pre-duped width) and start over:

$(window).load(function() {
    var speed = 75; //px per sec

    // Get the width of the slider before you duplicate it
    var width = $('#slider').outerWidth();

    // Repeat the inner content by cloning and appending it to the end
    $('#slider').append($('#slider').children().clone());

    function slide() {
        // The duration takes into account the current position
        // in case you are starting from a hover-pause
        var curleft = $('#slider').position().left;
        var duration = (width+curleft) * 1000 / speed;
        $("#slider").animate({
            // Animate until original width slides off to left
            left: "-" + width + "px"
        }, duration, "linear", function() {
            // Reset to original position and start over
            $(this).css("left", "0px");
            slide();
        });
    }

    $("#slider").hover(function() {
        $('#slider').stop();
    }, function() {
        slide();
    });

    slide();
});

You can also change your hover to just do .stop() and slide() as long as you do a little extra math in your slide() call to see where you currently are.

Demo: http://jsfiddle.net/6Dxg6/