Question

我对jQuery动画效果不是很好，但是当鼠标进入其元素时，我正试图为背景图像设置动画。动画很简单，鼠标进入，图像向左移动一点。鼠标离开，图像返回其位置。

我可以在Chrome上使用它，但在IE中有不同的行为。 FF不会移动任何事件。我的是以下内容：

$(".arrow").on("mouseenter", function()
{
    $(this).stop(true).animate({ "background-position-x": "75%" });
}).on("mouseleave", function()
{
    $(this).stop(true).animate({ "background-position-x": "50%" });
});

.arrow是具有以下属性的div：

.arrow {
    width: 50px;
    padding: 10px 0;
    background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
    background-size: 16px
}

And here is a demo

对我来说最奇怪的是IE的情况。似乎动画始终从左到右，而不是中右。当老鼠离开时它会出现。有什么想法吗？

Answer 1

因为Firefox不支持backgroundPositionX，但它支持background position

在 firefox 和 InternetExplorer 中尝试此代码：

$(".arrow").on("mouseenter", function()
{
    $(this).stop(true).animate({ "background-position": "75%" });
}).on("mouseleave", function()
{
    $(this).stop(true).animate({ "background-position": "50%" });
});

更多信息：backgroundPositionX not working on Firefox

这是 Updated Demo 与FF和IE配合良好

Answer 2

我知道Manwal已经解决了它，但它也可以很容易地在CSS3中完成：

    .arrow {
        float:left;
        width: 50px;
        padding: 10px 0;
        background: url(http://upload.wikimedia.org/wikipedia/commons/4/45/Right-facing-Arrow-icon.jpg) no-repeat center;
        background-size: 16px;
        transition: all 2s ease-in-out;
    }

        .arrow:hover {

            transform :translateX(50px);
        }

其中translate 50px将是您希望沿X轴移动它的值

动画背景位置不同的行为

2 个答案: