0

I'm trying to use jQuery to swap the background image of an element in set sequence to create an animation where each image is a different frame and it should iterate through the frames until it reaches the last frame and then return to the beginning again.

My code is as follows:

$spinner_currentFrame = 1;

            function UpdateSpinner(target, numFrames)
            {
                $spinner_currentFrame = ($spinner_currentFrame) + 1;
                if($spinner_currentFrame > numFrames) {
                    $spinner_currentFrame = 1;
                }
                $(target).css("background-image", "frame-" + $spinner_currentFrame + ".jpg");
            }

            $(document).ready(function()
            {
                $spinner_loadingAnim = setInterval(function ()
                {
                    UpdateSpinner('#spinner', 300);
                },
                24);
            });

The reason I'm not using a sprite is because I have a few hundred images and the frames have been exported from Flash like frame-1.jpg, frame-2.jpg. However my code isn't reporting any errors but the background image isn't been added... Any ideas? Suggestions?

Thanks

Cameron
  • 27,963
  • 100
  • 281
  • 483

3 Answers3

1

The background-image css property needs to be set with url("/path/frame-1.jpg").

$(target).css("background-image", "url('frame-" + $spinner_currentFrame + ".jpg')");
Konstantin Dinev
  • 34,219
  • 14
  • 75
  • 100
0

Maybe I'm wrong, but doesn't it have to be like

$(target).css("background-image", "url(frame-" + $spinner_currentFrame + ".jpg)");
John Doe
  • 173
  • 10
0
 $(target).css("background-image", "url('frame-" + $spinner_currentFrame + ".jpg')");

like the question Setting background-image using jQuery CSS property

edit- typo

Community
  • 1
  • 1
Pedro del Sol
  • 2,840
  • 9
  • 39
  • 52