jQuery background-第一次悬停时，位置动画以相反方向移动

Question

当我在Chrome (Windows8)中“.tile”类的div上执行第一次悬停时，背景位置虽然被指定为只有负移，但却在相反的方向上后退。对于每个这样的div，在第一次悬停时都会重复这一行为；但是，它似乎不会在随后的悬停中重复，而是平滑地滑动，没有卡顿。

我试着按照一些较早的jQuery动画卡顿常见问题解答中的建议删除填充，但没有用(尽管我认为它们不再适用于jQ 1.3+?)。我是jQuery的新手，需要一点帮助，谢谢。:)

$(function() {
    $('.tile').hover(function () {
        console.log('in');
        $(this).animate({
            'background-position-y': -($(this).children('figcaption').height())
        }, 'fast', 'linear');
        $(this).children('figcaption').slideToggle('fast');
    },
    function () {
        console.log('out');
        $(this).animate({
            'background-position-y': 0
        }, 'fast', 'linear');
        $(this).children('figcaption').slideToggle('fast');
    });
});

Answer 1

我意识到，由于我不知道背景图像的高度，因此由于css背景位置规则，不可能指定距中心的偏移量。

我继续使用图像大小调整脚本(SLIR)将其裁剪成形状。知道了结果图像的尺寸，我可以根据需要使用绝对值来定位我的背景。

参考：

• CSS: Using Percentages in Background-Image