Отображение изображения с использованием JQuery и css background-position: дрожание (кроме firefox) + процентная головоломка - PullRequest
Новая
       15

Отображение изображения с использованием JQuery и css background-position: дрожание (кроме firefox) + процентная головоломка

1 голос
/ 07 сентября 2011

Я делаю анимированное меню JQuery. Это всего лишь части кода, относящиеся к моему вопросу.

У меня есть куча div, которые анимированы (с использованием JQuery), поэтому они расширяются вбок, влево и вправо. В 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 равен 0, ширина = 600 пикселей в развернутом виде и оставлен = 100, ширина = 100 в свернутом виде. Как это становится 20%? Разве это не должен быть левый край свернутого размера (100/600 = 16,666%?) Очевидно, нет, но почему бы и нет?

2) Это выглядит просто замечательно в Firefox, но в Safari и Chrome (я на OSX) изображение дрожит, когда идет анимация. Любая идея о том, как это исправить, чтобы он выглядел лучше в других браузерах?

1 Ответ

0 голосов
/ 08 сентября 2011

Я много чего пробовал, но в итоге получаю эту версию: http://jsfiddle.net/NC2pq/ В Chrome 13.0.782.215 и Firefox v6 (в Ubuntu) все работает нормально.

Сначала ямы пытались установить фиксированные значения для background-position, а затем анимировать это свойство, но, как оказалось, вы не можете анимировать backgroundPosition с помощью простого jQuery (я нашел несколько плагинов для этого, но не придерживался этой идеи).

В конце концов мне пришлось создать еще один контейнер, положение которого можно было бы легко анимировать.

Конечно, это своего рода подтверждение концепции.Фактическое использование потребует настройки производительности и презентации в зависимости от ситуации, с которой мы имеем дело.

...