动画背景位置不同行为
动画背景位置不同行为
提问于 2014-05-21 12:48:21
我对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
}这是一个演示。
对我来说最奇怪的是IE的情况。看上去动画总是从左到右，而不是从中到右。当老鼠也离开的时候。有什么想法吗？
回答 1
Stack Overflow用户
发布于 2014-05-21 13:05:06
我知道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);
}其中翻译50 it将是您希望沿着X轴移动它的值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23783658
复制相关文章
相似问题
腾讯云开发者
