Why is this failing to animate?

Question

$( document ).ready(function() {
$('.overlay-1').css({backgroundPosition:'30% 100%'});

var to;

function infinite(){
to = setTimeout(function(){
$('.overlay-1').animate({backgroundPosition:"30% 2000%"},12000,function(){
    $('.overlay-1').css({backgroundPosition:'30% 100%'});
  infinite();
    });    
  });
}
infinite();


});

Why is this failig to animate the background image? It's meant to be an endless scrolling background image, but nothing is moving?

Cheers, Sam

I'm interested in this too, I'll try to write up a second answer. — Hless, Feb 04 '14 at 09:59

score 1 · Accepted Answer · edited May 23 '17 at 12:28

1

You need seperate background positions in you animate function, jquery can't handle multiple css arguments like that. Ex:

$('.overlay-1').animate({
    'background-position-x': '30%',  
    'background-position-y': '2000%'},12000, function(){});

EDIT: Just figured this won't work in FF. Try this one for firefox: jquery animate background-position firefox

edited May 23 '17 at 12:28

Community

1
1

answered Feb 04 '14 at 09:33

Hless

3,326
20
22

Thanks. Does the CSS require separate background positions too? It's early days for my jQuery, I don't suppose you could expand on your answer a little could you? Cheers,Sam – Sam Slater Feb 04 '14 at 09:50
I don't think it does because in most browsers the CSS property `background-position` is parsed to the `background-position-x` `background-position-y` properties. Where X is the horizontal axis and Y is the vertical axis. Firefox however doesn't use separate properties for each axis. That's reason why this doesn't work in Firefox. – Hless Feb 04 '14 at 09:57
To be honest, I'd personally go with the CSS animations (see my other answer). It just feels more robust to me. – Hless Feb 04 '14 at 11:10

Hless · Answer 2 · 2014-02-04T11:20:09.053

You could use CSS3 animations. Do note that it isn't supported in all browsers. You can view browser adoption here: http://caniuse.com/css-animation .

For browsers like IE9 you could use a static image instead to gradually decrease user experience for older browsers.

I wrote up a little example of how to animate the background position with CSS, I'm infinitely looping the Google logo as a background image from top to bottom: http://jsfiddle.net/xMMct/

In your case it's up to you to position the background image as such that it appears to be scrolling endlessly.

Css code:

.background {
    background-image: url(https://www.google.nl/images/srpr/logo11w.png);
    width: 200px;
    height: 500px;
    background-size: 200px auto;
    background-repeat: no-repeat;
    background-position: 0% -20%;
    animation:bg 5s linear infinite;
    -webkit-animation:bg 5s linear infinite;
}

@keyframes bg
{
   from {background-position: 0% -20%;}
   to {background-position: 0% 120%;}
}

@-webkit-keyframes bg /* Safari and Chrome */
{
   from {background-position: 0% -20%;}
   to {background-position: 0% 120%;}
}

Here's another fiddle where the background appears to be scrolling endlessly (do forgive to little skip every 5 seconds, the values aren't perfect) http://jsfiddle.net/xMMct/1/

Edit: Better example (no skips) http://jsfiddle.net/xMMct/2/

Why is this failing to animate?

2 Answers2