使用JQuery和css显示图像背景位置：抖动（firefox除外）+；百分比难题_Jquery_Css_Animation_Safari_Background Position

使用JQuery和css显示图像背景位置：抖动（firefox除外）+；百分比难题

jquery css animation safari

使用JQuery和css显示图像背景位置：抖动（firefox除外）+；百分比难题,jquery,css,animation,safari,background-position,Jquery,Css,Animation,Safari,Background Position,我正在做JQuery动画菜单的事情。这只是代码中与我的问题有关的部分我有一堆div是动画的（使用JQuery），所以它们可以横向、左右展开。在div中，我使用背景图像，当div展开和收缩时，我希望保持图像的位置，使其不移动下面是一个（正在工作的）自包含的完整示例，请将其另存为.html以进行尝试。（你能把这个装在stackoverflow里吗？） JQuery抖动错误正文{背景：#0f1923；边距：0px；填充：0px；} 部门标志{ 边界：0px；边际：0px；填充：0px；

我正在做JQuery动画菜单的事情。这只是代码中与我的问题有关的部分

我有一堆div是动画的（使用JQuery），所以它们可以横向、左右展开。在div中，我使用背景图像，当div展开和收缩时，我希望保持图像的位置，使其不移动

下面是一个（正在工作的）自包含的完整示例，请将其另存为.html以进行尝试。（你能把这个装在stackoverflow里吗？）


JQuery抖动错误
正文{背景：#0f1923；边距：0px；填充：0px；}
部门标志{
边界：0px；
边际：0px；
填充：0px；
背景图像：url（“http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"); 
背景位置：20%；
位置：绝对位置；
高度：53px；
左：100px；
宽度：100px；
顶部：50px；
}
$（'div#logo'）.mouseenter（function（）{$（this）.动画（{左：“0px”，宽：“600px”}，1000）；}）/*展示*/
$（'div#logo'）.mouseleave（function（）{$（this）.动画（{左：“100px”，宽：“100px”}，1000）；}）/*收成*/

有两个问题要问你：

1）背景职位百分比是如何计算的？反复试验表明，这里20%是正确的。展开时div为left=0，width=600像素，折叠时为left=100，width=100。怎么会变成20%？它不应该是折叠尺寸的左边缘（100/600=16.666%？）显然不是，但为什么不是

2）这在Firefox中看起来很不错，但在Safari和Chrome（我在OSX上）中，动画播放时图像会抖动。有没有办法解决这个问题，让它在其他浏览器中看起来更好

我尝试了很多东西，但最终得到了这个版本：它在Chrome13.0.782.215和FirefoxV6（在Ubuntu上）中运行正常

起初，我尝试在背景位置上设置固定值，然后设置此属性的动画，但事实证明，不能使用普通jQuery设置背景位置的动画（我找到了一些插件，但没有遵循这个想法）

最后，我不得不创建另一个容器，该容器的位置可以轻松设置动画

当然，这是一种概念证明。实际使用需要根据我们正在处理的情况调整性能和演示文稿。

“反复试验表明20%在这里是正确的。”？你是什么意思？20%在什么意义上是正确的？至于修复它，以固定单位表示的值（如px）对于背景位置，修复了动画问题。哦，还有一件事，在执行

之前，您需要添加.stop（）
。设置动画

，否则，如果您执行多次快速翻转，动画将被触发X次，容器将前后增长和收缩。感谢Martin B。在@WTK上发布示例：正确”，即当我设置div的左属性和宽度属性的动画时，图像不会横向移动。你能给我一个使用像素值的工作示例吗？我认为以这种方式设置动画需要相对值？关于stop（）你可能是对的，但无论如何，这不是真正的交易，只是为了展示我所问的问题。

<!DOCTYPE html>
<html>
    <head>
        <title>JQuery Jitter Bug</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style>
            body { background: #0f1923; margin:0px; padding:0px;}
            div#logo {
                border: 0px;
                margin: 0px;
                padding: 0px;
                background-image: url("http://static.jquery.com/files/rocker/images/logo_jquery_215x53.gif"); 
                background-position:20%; 
                position: absolute;
                height: 53px;
                left: 100px;
                width: 100px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="logo"></div>
        <script>
            $('div#logo').mouseenter(function(){$(this).animate( {left: "0px", width: "600px"}, 1000); }); /* show */
            $('div#logo').mouseleave(function(){$(this).animate( {left: "100px", width: "100px"}, 1000); });  /* crop */
        </script>
    </body>
</html>