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

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

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


animation jquery css safari background-position
person PapaFreud    schedule 07.09.2011    source источник
comment
«Метод проб и ошибок показывает, что здесь верно 20%». Что ты имеешь в виду? 20% правильно в каком смысле? Что касается исправления, то значение в фиксированных единицах (например, px) для background-position устраняет проблемы с анимацией.   -  person WTK    schedule 07.09.2011
comment
Да, и еще одна вещь, вы должны добавить .stop() перед выполнением .animate, иначе, если вы сделаете несколько быстрых ролловеров, анимация будет запущена X раз, а контейнер будет увеличиваться и уменьшаться вперед и назад.   -  person WTK    schedule 07.09.2011
comment
Спасибо Мартину Б. за размещение примера на странице jsbin.com/eyojah.   -  person PapaFreud    schedule 07.09.2011
comment
@WTK: Правильно, в том смысле, что изображение не перемещается вбок, когда я анимирую свойства левого края и ширины элемента div. Можете ли вы показать мне рабочий пример, в котором вы используете значения пикселей? Я думал, что для анимации таким образом требуются относительные значения? Вы, вероятно, правы насчет stop(), но в любом случае это не совсем так, это просто для демонстрации проблем, о которых я спрашиваю.   -  person PapaFreud    schedule 07.09.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

person WTK    schedule 08.09.2011