I'm having an issue with a set of elements that have background images applied to them. Specifically, I want the planets in the images (all except the first one) to move slightly up and then back down to create a floating effect.
In my jQuery code, I've created a setInterval function to run a loop every 2 seconds. Inside this loop, I attempted to change the background position of the elements. When I directly set the background position using .css(), it blinks the planets as expected within the 2-second interval. However, when I tried to use the animate() method like so:
$('.header').animate({backgroundPosition: '(0px -400px)'}, 1000 );// additional space hereNo actual movement occurred on the page. My goal is to achieve a hover-like effect where the planets move up and then down repeatedly. Here's the relevant jQuery code snippet:
// Moving planets up and down
$(document).ready(function(){
var i = 0;
setInterval(function(){
//$('.header').css('background-position','top 5px center, -155px 200px, left 1255px top 250px, right -15px top 350px');
$('.header').animate({backgroundPosition: '(0px -400px)'}, 1000 );
i++;
},2000);
});