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
  • 26,540
  • 96
  • 273
  • 470

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
  • 32,797
  • 13
  • 71
  • 95
0

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

$(target).css("background-image", "url(frame-" + $spinner_currentFrame + ".jpg)");
John Doe
  • 163
  • 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,773
  • 9
  • 43
  • 50