Hi, I'm trying to create an endless animation similar to a screen saver, where an image floats around the screen, fading in and out. I would like to stay out of the global namespace, so I'd like to use the callback to animate() rather than getTimeout(), which seems to operate only on functions in the global namespace. Please correct me if I'm wrong about that.
But I'm having trouble maintaining the scope I want for the callback -- I want "this" to refer to my Animation object, not the HTML element. I understand many folks have solved this problem for events by using bind() or live(), but I am wondering how to do this for animate(). Here is my code: $(document).ready(function(){ var startStop = 1; //object for creating animated elements that fade in or out while moving to a random point. var Animation = function(elementID){ this.opa = 1; this.floatAround = function(){ var top = Math.random() * $('#content').height(); var left = Math.random() * $('#content').width(); $(elementID).animate( { opacity:(this.opa), marginTop:top+'px', marginLeft:left+'px' }, 1000, 'linear', this.callback ); this.opa = this.opa > 0 ? 0 : 1; }; this.callback = function(){ //alert(this); //HTML Image Element -- not what I want. if(startStop == 1){ //this.floatAround(); //won't work, because this no longer points to the Animation object, but this is what I want to do. } }; }; //user may click on the containing div to stop the animation. $('#content').toggle( function(){ startStop = 0; }, function(){ startStop = 1; //floater.floatAround(); //...and maybe start it again. } ); //start the animation var floater = new Animation('#animate_me'); floater.floatAround(); }); thanks for any help in advance!