如何在Jquery中更改图像的位置？

Question

我有这样的图像：

我希望在悬停时改变jquery中的位置，使其看起来正在改变图像。

我不想使用.animate函数来移动图像，但基本上让图像滚动到每个帧。

现在我有一个宽度设置，我的溢出隐藏，所以你一次只能看到一个图像。

我的HTML

 <ul class="icons">
                    <li id="trasklogo"><img src="img/icons/nav-se1aec3ccea.png" width="75" height="823" /></li>
                    <li><img src="img/icons/sprite_about.png" width="1050" height="70" /></li>
                    <li><img src="img/icons/sprite_genetics.png" width="1050" height="70" /></li>
                    <li><img src="img/icons/sprite_innovation.png" width="1050" height="70" /></li>
                    <li><img src="img/icons/sprite_media.png" width="1050" height="70" /></li>
                </ul>

我的CSS

ul li, {
list-style: none;
}

li {
display: list-item;
text-align: -webkit-match-parent;
}
.menu .icons #trasklogo {
height: 87px;
overflow: hidden;
}
.container .menu .icons {
width: 75px;
overflow: hidden;
}

Answer 1

你想要完成的事情并不完全清楚。

如果您尝试将此精灵制作动画，请查看Spritely。这个javascript会自动移动精灵来模拟关键帧动画。你只需提供一个宽度以及精灵应该移动的速度，它将完成其余的工作。

如果您尝试慢慢平移图像并停止，最好的选择 将在背景x位置使用动画。我怀疑这是你的意图，基于你提供的精灵和你要求不使用动画的事实。

您还可以使用@keyframes使用CSS模拟此动画。看到这个小提琴：http://jsfiddle.net/ZLyrN/

注意：如果没有polyfill，CSS动画不能跨浏览器兼容。

Answer 2

您可以使用JQuery在Javascript中轻松创建该效果。

setInterval(function() {
    // parse the current margin to an integer and substract the with of one frame
    var nr=parseInt($("#sw").css("margin-left")) - 70; 
    // reset margin to 0 if margin > last frame
    if(nr<=-1050) {
        nr=0;
    }
    // set the new margin
    $("#sw").css("margin-left", nr+"px");
}, 50);

CSS：

#wr {
    width:70px;
    overflow:hidden;
}

HTML：

<div id="wr">
    <img id="sw" src="http://i.stack.imgur.com/hCX5s.png" />
</div>

工作示例： http://jsfiddle.net/U2MrB/