JQuery Animowanie pozycji Tło przeglądarek krzyżowe

Question

wydaje nie jestem w stanie uzyskać to do pracy:

$("#animation").animate({backgroundPosition:"-100px 10px"}); 

Próbowałem to działa, ale nie na FFox:

$('#animation').animate({ 
    'background-position-x': '10%', 
    'background-position-y': '20%' 
}, 10000, 'linear'); 

div:

<div id="animation" style="border: 0px solid rgb(153, 153, 153); margin: auto; width:550%;height: 100%;background-size:100% 100%; overflow:hidden; padding: 0px; background-image: url(images/pano.png); background-attachment: scroll; box-shadow: rgb(0, 0, 0) 0px 0px 40px inset; background-position: 180px 0px; background-repeat: no-repeat;display: none;"></div> 

JsFiddle: http://jsfiddle.net/sorfect/34psJ/1/ Używam JQuery 1.8. Wszelkie pomysły?

Answer 1

OK, więc jeśli chcesz tylko animować pozycję x, masz szczęście jako animacja y dla background-position nie działa w jQuery. Więc dla x użytku:

'background-position': '10%' 

ale jeśli chcesz, aby zwiększyć pozycję w celu animować serię klatek, trzeba zwiększyć w ten sposób:

'background-position': '+=10%' 

Zobacz moją jsFiddle na przykład pracy z stop/go kontroli.

Answer 2

Myślę, że this would help you i this too, dlaczego nie działa w Firefoksie. Pracowałem z twoim kodem. Poniższy blok kodu zachowuje się w taki sam sposób jak kod.

ten zachowuje się w ten sam sposób

$(document).ready(function() { 
    $('#animation').animate({'background-position': '10%'}, 10000, 'linear'); 
}); 

Aby

$('#animation').animate({ 
'background-position-x': '10%', 
    'background-position-y': '20%' 
}, 10000, 'linear'); 

I ten blok kodu działa w Firefoksie też.

$(document).ready(function() { 
    $('#animation').animate({'background-position': '10%'}, 10000, 'linear'); 
}); 

Aby uzyskać dalsze informacje, po prostu sprawdź powyższe linki. Ci pomogą.

Answer 3

można użyć tego kodu do animowania położenia tła wzdłuż obu kierunku X i Y i jest to mniej kosztowne cpu

var x=0; 
window.setInterval(function(){ 
$('#animation').css('background-position',x+'px '+x+'px'); 
x=(x-4)%1100;//1100 is width of background image in px 
},70); 

Answer 4

Dlaczego nie spróbować Keith Wood jQuery Background Position Animation plugin? Skorzystałem z niego kilka lat temu, kiedy przyszedł do projektu późno i potrzebowałem rozwiązania do animacji tła i nie miałem czasu, aby zbadać, dlaczego mój kod nie działa w przeglądarce (szybkie i brudne - hej, nadszedł termin ostateczny duże!) i będę szczery, to jedna z niewielu wtyczek, do których wracam.

Na stronie z linkami znajdują się przykłady, więc nie będę się powtarzał, ale czapki z głów dla pana Wooda, ponieważ jego wtyczka nigdy mnie nie zawiodła.