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

Posted 2023-05-08

【中文标题】动画在 jQuery >1.4.x 中被破坏

【英文标题】：Animation destroyed in jQuery >1.4.x

【发布时间】：2012-04-26 07:16:54

【问题描述】：

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

Animation demo

【参考方案1】：

虽然我在发行说明中没有看到任何内容，但广泛的测试似乎表明，从 jQuery 1.5.0 及更高版本开始，您必须分别为 background-position-x 和 background-position-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);