How to loop a simple JQuery function?

Question

I'm trying to do something very simple: continuously loop a background image. I'm doing this via the "Background Position Animations" plugin.

My current code:

$(function skyloop() {  
  $('#header').animate ({backgroundPosition:"(-250 0)"}, {duration:1000});  
});

I need a way to call the 'skyloop' function at the end of the animation, which would cause it to loop, but I can't seem to find the way to do that.

[EDIT] I've read all of the replies and I can't figure it out; nothing seems to work. It simply refuses to run again. The only thing I can think of is that the issues is caused by the plugin as I'm modifying a background image. I'll try to find another way to move a background image continuously (I'm trying to simulator a sky, by the way).

Ian Wetherbee · Accepted Answer · 2010-07-15 16:21:48Z

3

There's a callback parameter for animate: http://api.jquery.com/animate/

.animate( properties, [ duration ], [ easing ], [ callback ] )

EDIT:

Your problem in this case (as well as needing the callback) is the backgroundPosition:(-250 0), instead it should be using relative operators to keep decrementing the background position, like so: backgroundPosition: "-=250".

edited Jul 15, 2010 at 16:21

answered Jul 15, 2010 at 15:53

Ian Wetherbee

6,1492 gold badges31 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

TJ Koblentz Over a year ago

+1 for linking to the documentation and referencing that primarily (in my opinion, the most reliable and beneficial method of learning in the long term -- understanding and working with references), but you should maybe also add a part to your answer that directly answers the OP's question (to distinguish this answer from any other question referring to having a callback to jQuery's animate).

steelfrog Over a year ago

Aye. I did take a look at the documentation, and tried to add the simple callback at the end but it simply did not work. I'm starting to think that it is likely cause by the plugin I'm using to animate the background.

Mark Schultheiss · Accepted Answer · 2010-07-15 15:59:51Z

2

setInterval( "skyloop()", 1001);
function skyloop() {   
  $('#header').animate ({backgroundPosition:"(-250 0)"}, {duration:1000});   
};

answered Jul 15, 2010 at 15:59

Mark Schultheiss

34.3k13 gold badges75 silver badges116 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

demo

function skyloop() {  
  $('#header').animate ({"background-position":"-=250"}, 1000, skyloop);  
}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jul 15, 2010 at 15:54

Reigel Gallarde

65.4k21 gold badges126 silver badges142 bronze badges

Comments

GitaarLAB · Accepted Answer · 2015-03-02 18:14:16Z

2

$(function(){
   var skyloop = function(){
      $('#header')
          .animate({backgroundPosition:"(-250 0)" }, { duration: 1000 })
          .queue(skyloop);
   }
});

queue adds a function to fire at the end of your animation.

edited Mar 2, 2015 at 18:14

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

answered Jul 15, 2010 at 15:56

Master Morality

5,9686 gold badges33 silver badges43 bronze badges

Comments

Nick Craver · Accepted Answer · 2010-07-15 15:54:19Z

1

You can do it like this:

function skyloop() {  
  $('#header').animate({backgroundPosition:"(-250 0)"}, 
                       {duration:1000}, 
                       skyloop);  
}
$(skyloop); //call it on document.ready to kick it off

answered Jul 15, 2010 at 15:54

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Comments

Oscar · Accepted Answer · 2010-07-15 15:54:54Z

0

I think the easiest way is to have a look at jQuery Timers: http://plugins.jquery.com/project/timers

For example the everyTime() function.

answered Jul 15, 2010 at 15:54

Oscar

1,23813 silver badges21 bronze badges

Comments

Gabriele Petrioli · Accepted Answer · 2010-07-15 15:58:16Z

0

You do not need that plugin. Use a more recent jQuery version that supports the .animate. (1.4.2 is the latest)

The animate method supports callback functions when the current animation completes..

answered Jul 15, 2010 at 15:58

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

Comments

Tad · Accepted Answer · 2010-07-16 06:52:48Z

0

Although it might look better to use the .animate method to scroll your background; you might start to see high cpu usage once its running. Depending on the background image you might want to check out jquery-randomised-background-scrolling-effect-tutorial. You could take a sky picture and scroll that insteal

But back to the question at hand one way to handle relooping the JS setInterval should have done the trick. although this is how I would have wrote it.

setInterval(function(){ $('#header').animate ({backgroundPosition:"(-250 0)"}, {duration:1000});} , 1000);

answered Jul 16, 2010 at 6:52

Tad

1941 gold badge1 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to loop a simple JQuery function?

8 Answers 8

2 Comments

Comments

demo

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related