Search code examples
jqueryanimationcountdown

Animation destroyed in jQuery >1.4.x


Why is the flip animation on the countdown not working when including the latest jQuery version instead of version 1.4.2?

Animation demo


Solution

  • Although I didn't see anything in the release notes, extensive testing seems to reveal that from jQuery 1.5.0 and up you have to animate background-position-x and background-position-y separately. See this question: jquery animate background position

    This code works with jQuery 1.5.0:

    // Animation function
    function animateDigit(which, oldDigit, newDigit){
        var speed = 80;
        var pos = getPos(which, oldDigit);
        var newPos = getPos(which, newDigit);
        // Each animation is 5 frames long, and 103px down the background image.
        // We delay each frame according to the speed above.
        for (var k = 0; k < animationFrames; k++){
            pos -= frameShift;
            if (k == (animationFrames - 1)){
                $("#" + which).delay(speed).animate({'background-position-y': pos + 'px'}, 0, function(){
                    // At end of animation, shift position to new digit.
                    $("#" + which).css({'background-position': '0 ' + newPos + 'px'}, 0);
                });
            }
            else{
                $("#" + which).delay(speed).animate({'background-position-y': pos + 'px'}, 0);
            }
        }
    }