Пользовательская «одушевленная» функция jQuery. Как сбросить переменную шага "сейчас"? - PullRequest
Новая
       23

Пользовательская «одушевленная» функция jQuery. Как сбросить переменную шага "сейчас"?

2 голосов
/ 18 января 2012

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

http://snook.ca/archives/javascript/jquery-bg-image-animations

Моя функция была такой: 

$('#content').css( {backgroundPosition: "0 0"} )
             .animate(
                 {backgroundPosition:"(0 -900px)"}, 
                 {duration:500}
             );

Мне не повезло с этим, поэтому я попытался написать свою собственную функцию, которая изменяет вертикальное положение фона элемента. Похоже: 

$.fn.moveBackgroundY = function( pixels, duration, easing ) {

    return this.animate(
                { pixels: pixels },
                {
                    step: function(now,fx) {

                        console.log("Background Y position - " + now);

                        $(this).css({
                            backgroundPosition: '0px ' + now + 'px',
                        });
                    },
                    duration: duration,
                    complete: function() {
                        $(this).css({
                            backgroundPosition: '0px 0px',
                        });
                    }
                }, easing);
};

Чтобы анимировать положение фона элемента Y до -900, я вызываю функцию следующим образом: 

$('#content').moveBackgroundY(-900, 2100, 'easeInOutCubic');

Обратите внимание, что здесь переменная сейчас (положение фона Y) внутри step: будет уменьшаться с 0 до -900.

Это прекрасно работает, но тут возникает моя проблема. После этого мне нужно сбросить эту фоновую позицию на «0px 0px» напрямую с помощью функции jQuery .css (), а затем снова анимировать ее, например: 

$('#content').moveBackgroundY(300, 2100, 'easeInOutCubic');

В этом случае при сбросе моей фоновой позиции на «0px 0px» параметр now должен изменяться от 0 до 300, но он изменяется от -900 до 300, где -900 было значением Сначала я вызываю свою функцию.

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

У меня есть другая функция, подобная этой, которая вращает элемент, изменяющий свойство CSS3 transform - rotate, и у меня та же проблема.

Спасибо за вашу помощь!

1 Ответ

3 голосов
/ 03 февраля 2012

Это сработало для меня: 

return this.animate(
            { pixels: pixels },
            {
                step: function(now,fx) {
                    var calculatedPixels = this.pixels;
                    console.log("Background Y position - " + now);


                    $(this).css({
                        backgroundPosition: '0px ' + calculatedPixels + 'px',
                    });
                },
                duration: duration,
                complete: function() {
                    $(this).css({
                        backgroundPosition: '0px 0px',
                    });
                    //not so sure about this but you have to do this somehow
                    this.pixels = 0;
                }
            }, easing);

Проблема сброса положения связана с тем, что вы анимируете значение «пикселей», а не backgroundPosition. Затем вы применяете значение «пикселей» к backgroundPosition. Затем сбросьте backgroundPosition, но не сбросьте значение «пикселей». Следующая анимация будет иметь последнее значение пикселей в качестве начального значения. Вы должны найти способ как-то сбросить значение «пикселей» в значение backgroundPosition, чтобы синхронизировать их.

...