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

发布于 2024-12-03 11:05:13 字数 1726 浏览 1 评论 0原文

我正在做一个 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 展开时 left=0、width=600 像素，折叠时 left=100、width=100 像素。怎么变成20%了？难道不应该是折叠尺寸的左边缘（100/600 = 16.666%？）显然不是，但为什么不呢？

2) 这在 Firefox 中看起来很漂亮，但在 Safari 和 Chrome（我在 OSX 上）中，当动画进行时图像会抖动。知道如何解决这个问题，以便它在其他浏览器中看起来更好吗？

原文

I'm doing a JQuery animated menu thing. This is just the parts of the code pertaining to my question.

I have a bunch of divs that are animated (using JQuery) so they expand sideways, left and right. In the div I use a background image, and when the div expands and contracts I want to keep the image positioned so it doesn't move.

Here's a (working) self-contained complete example, save this as an .html to try it. (Can you attach this in stackoverflow somehow?)

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>

Two questions for you:

1) How is that background-position percentage calculated? Trial and error shows that 20% is correct here. The div is left=0, width=600 pixels when expanded, and left=100, width=100 when collapsed. How does that become 20%? Shouldn't it be the left edge of the collapsed size (100/600 = 16.666%?) Apparently not, but why not?

2) This looks just peachy in Firefox, but in Safari and Chrome (I'm on OSX) the image shakes when the animation is going on. Any idea on how to fix that so it looks better in other browsers?

分享到QQ

分享到微博