jquery - 动画在 jQuery >1.4.x 中被破坏

Question

为什么在包含最新的 jQuery 版本而不是 1.4.2 版本时，倒计时的翻转动画不起作用？

Animation demo

Answer 1

虽然我在发行说明中没有看到任何内容，但广泛的测试似乎表明，从 jQuery 1.5.0 及更高版本开始，您必须对 background-position-x 和 background- 进行动画处理位置-y 单独。看这个问题:jquery animate background position

此代码适用于 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);
        }
    }
}