jquery.animate background-position не работает - PullRequest
Новая
       53

jquery.animate background-position не работает

6 голосов
/ 22 февраля 2011

Я пытаюсь создать изменение положения фона с помощью анимации.
но по какой-то причине это не работает. 

<script language="javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<div class="moveme" style="height:80px;width:240px;background-image:url('http://www.google.de/intl/en_com/images/srpr/logo1w.png');background-repeat:no-repeat"></div>

<script language="javascript">
    $('.moveme').css("background-position","0px 0px").animate({backgroundPosition:"-100px 10px"});
</script>

идеи?

Ответы [ 5 ]

7 голосов
/ 22 февраля 2011

Анимация backgroundPosition не работает с JQuery 1.5.0. Вам придется вернуться к 1.4.4, если вы хотите, чтобы он работал. Очевидно, тот факт, что он работал в 1.4.4 вообще, является совпадением, так как «Все анимированные свойства должны быть анимированы к одному числовому значению, за исключением отмеченного ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием базовой функциональности jQuery. (Например, width, height или left могут быть анимированными, но background-color не может быть.) "Поскольку backgroundPosition требует двух числовых значений, он не должен поддерживаться.

См. Этот билет ошибки: http://bugs.jquery.com/ticket/8160

И возможное решение: http://bugs.jquery.com/ticket/7755#comment:1

3 голосов
/ 19 июля 2012

jQuery более новые версии, чем 1.4, не поддерживает функции с двумя атрибутами.Но вместо этого вы можете использовать две отдельные функции - одну для x-измерения и одну для y, например: 

$('.moveme').css("background-position","0px 0px").animate({'background-position-x': "-100px", 'background-position-y': "10px"});

Это не исправляет ошибки консоли js, связанные с event.layer (это вызвано браузером ине причиняя вреда сайтам) но это работает;)

3 голосов
/ 22 февраля 2011

jQuery не поддерживает это по умолчанию.

Вы можете использовать плагин, например: http://plugins.jquery.com/project/backgroundPosition-Effect

EDIT:

Я был не прав, все работает: 

$(function() {
  $('.moveme').css("backgroundPosition","0px 0px").animate({"backgroundPosition":"-100px 10px"});
});

Это работает, если вы печатаете в адресной строке, но, кажется, я не могу заставить это работать на jsfiddle, странно ... xD

1 голос
/ 09 января 2012

Я использовал одну фоновую позицию здесь: www.we-new.com (нижний колонтитул), но это не тот эффект, который мне нужен сейчас. Мне нужно, чтобы изображение двигалось назад / вперед: - (

Прямо сейчас у меня есть это: 

$(document).ready(function() {
var scrollSpeed=70;
var step=1;
var current=0;
var imageWidth=60;
var headerWidth=screen.width;
var headerStyle = document.getElementById('header-content').style;
var restartPosition=-(imageWidth-headerWidth);

function scrollBg(){
current-=step;
if(current==restartPosition){
    current=0;}

$('#ball1').css("background-position",current+"px 0");}
var init = setInterval(scrollBg,scrollSpeed);
});

http://jsfiddle.net/yFKf9/3/

0 голосов
/ 22 февраля 2011

Оберните это внутри 

$(document).ready(function() {
     $('.moveme').css("backgroundPosition","0px 0px").animate({backgroundPosition:"-100px 10px"});
});
...