Question

当我在Chrome（Windows 8）中的“.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

jQuery背景位置动画在第一个悬停时向相反方向移动

1 个答案: