Question

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

我有一堆动画的div（使用JQuery），因此它们向左侧和向右侧向扩展。在div我使用背景图像，当div扩展和收缩时，我想保持图像定位，使其不移动。

这是一个（工作）自包含的完整示例，将其另存为.html进行尝试。（你能以某种方式在stackoverflow中附加它吗？）

<!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>

两个问题：

1）如何计算背景位置百分比？试验和错误表明这里20％是正确的。 div展开时左= 0，宽= 600像素，折叠时左= 100，宽= 100。这怎么变成20％？不应该是倒塌尺寸的左边缘（100/600 = 16.666％？）显然不是，但为什么不呢？

2）这在Firefox中看起来很好看，但在Safari和Chrome中（我在OSX上），动画进行时图像会抖动。有关如何修复它的想法，以便在其他浏览器中看起来更好吗？

Answer 1

我尝试了很多东西，但最终得到了这个版本：http://jsfiddle.net/NC2pq/ 它适用于Chrome 13.0.782.215和Firefox v6（在Ubuntu上）。

起初我尝试在background-position上设置修复值，然后为此属性设置动画，但是，事实证明，你无法使用普通的jQuery为backgroundPosition设置动画（我找到了一些插件，但没有'遵循这个想法）。

最后，我必须创建另一个容器，该位置可以轻松制作动画。

当然，它有点概念。实际使用情况需要根据我们正在处理的情况进行性能和演示调整。

图像显示使用JQuery和css background-position：抖动（除了firefox）+百分比难题

1 个答案: