1

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

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

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

http://jsbin.com/eyojah

<!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展开时为left=0，width=600像素，折叠时为left=100，width=100。怎么变成20%？它不应该是折叠大小的左边缘（100/600 = 16.666%？）显然不是，但为什么不呢？

2) 这在 Firefox 中看起来很漂亮，但在 Safari 和 Chrome（我在 OSX 上）中，动画播放时图像会抖动。关于如何解决这个问题的任何想法，以便在其他浏览器中看起来更好？

4

1 回答 1

0

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

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

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

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

于 2011-09-08T08:30:29.103 回答