Image reveal using JQuery and css background-position: jitters (except firefox) + percentage conundrum_问答_开发者

Image reveal using JQuery and css background-position: jitters (except firefox) + percentage conundrum

开发者 https://www.devze.com 2023-04-02 21:02 出处：网络

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

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

I h开发者_Go百科ave 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?

I've tried many things, but eventually end up with this version: http://jsfiddle.net/NC2pq/ It works ok in Chrome 13.0.782.215 and Firefox v6 (on Ubuntu).

At first I've tried to set fix values on background-position, and then animate this property, but, as it turns out, you can't animate backgroundPosition using plain jQuery (I found some plugins for that but didn't follow that idea).

In the end I had to create another container which position could be animated easily.

Of course it's kinda proof of concept. Actual usage would require performance and presentation tweaks depending on situation we're dealing with.