[jQuery] Re: animate callback scope for infinite loop?
I have been working on a different way...just fooling around actually. This just a semi-failed experiment. don't take too seriously. kinda new to js . just fooling around. PROBLEMS if i reset i to 0 most browsers will not allow my script to run var obj = $(#obj); var frames = 50; var top = 0; var left = 0; loopanimate(); function loopanimate() { for(var i = 0; i frames; i++) { top++; left++; obj.animate({ marginLeft:left+px, marginTop:top+px }, 10); if(i == (frames - 1)) { } else { } } } On Jun 11, 6:33 pm, Bill bill.fisher.oakl...@gmail.com wrote: Just adding some comments to make this thread more complete... One could also include all the callback code in an anonymous function within the arguments to the animate() function. Like this: $(elementID).animate( {opacity:(this.opa), marginTop:top+'px', marginLeft:left+'px' }, 1000, 'linear', function(){ //callback if(startStop == 1){ _this.floatAround(); //loop } } ); That would create a closure. But as you can see above, you would still need to save the reference to the original context (_this) to be able to call the floatAround() function. This technique (and the technique of saving the reference to the original context suggested by mkmanning) is outlined in the book JQuery in Action by Bibeault and Katz on page 337. Great book! On Jun 8, 12:07 pm, Bill bill.fisher.oakl...@gmail.com wrote: I get it now. It's simply the normal scope rules. this.callback() inherits the variables of all the functions above itself in the scope chain, so var _this can be seen, but this._this cannot -- that would reference the invocation context of the callback, which is the HTML element object. thanks again! On Jun 8, 11:58 am, Bill bill.fisher.oakl...@gmail.com wrote: Hi everyone, Thanks for your replies! I was about to reply to mkmanning and say that his solution would not work, but I tried it and it does! wow! thanks! Is this because floatAround(), being declared within function Animation (), is a closure? So the callback still has access to the local variables within Animation? thanks again, Bill On Jun 7, 11:13 pm, mkmanning michaell...@gmail.com wrote: The above post fails due to this: obj.animate({ opacity:myOpacity}, 500); animation(); The animation() function will be called immediately each time. It should be in obj.animate's callback function. That being said, the OP was asking how to do this without resorting to setTimeout(). To do that, in your Animation function just set a var to 'this': var Animation = function(elementID){ var _this = this; this.opa = 1; this.floatAround = function(){ ... then refer to it in your callback: 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. } On Jun 7, 10:02 pm, waseem sabjee waseemsab...@gmail.com wrote: var obj = $(div): // i want my objects opacity to go to 1 to 0.6 then follow that pattern var animeframe = 0; var myOpacity; function animation() { setTimeout(function() { if(animeframe == 0) { myOpacity = 0.6; animeframe = 1;} else if(animeframe == 1) { myOpacity = 1; animeframe = 0;} obj.animate({ opacity:myOpacity}, 500); animation(); }, 1000); } The Above animation function has some code wrapped in a setTimeout recalling the function after x seconds I then access my variable to define to which frame the animation should be on and what the properties are to set for that frame. i then do the animation and recall the function This will loop endlessly between frame one and two as the end can never me achieved. On Mon, Jun 8, 2009 at 3:11 AM, Bill bill.fisher.oakl...@gmail.com wrote: I think you may have misunderstood what I am trying to do. I need to refer to the instance
[jQuery] Re: animate callback scope for infinite loop?
Just adding some comments to make this thread more complete... One could also include all the callback code in an anonymous function within the arguments to the animate() function. Like this: $(elementID).animate( {opacity:(this.opa), marginTop:top+'px', marginLeft:left+'px' }, 1000, 'linear', function(){ //callback if(startStop == 1){ _this.floatAround(); //loop } } ); That would create a closure. But as you can see above, you would still need to save the reference to the original context (_this) to be able to call the floatAround() function. This technique (and the technique of saving the reference to the original context suggested by mkmanning) is outlined in the book JQuery in Action by Bibeault and Katz on page 337. Great book! On Jun 8, 12:07 pm, Bill bill.fisher.oakl...@gmail.com wrote: I get it now. It's simply the normal scope rules. this.callback() inherits the variables of all the functions above itself in the scope chain, so var _this can be seen, but this._this cannot -- that would reference the invocation context of the callback, which is the HTML element object. thanks again! On Jun 8, 11:58 am, Bill bill.fisher.oakl...@gmail.com wrote: Hi everyone, Thanks for your replies! I was about to reply to mkmanning and say that his solution would not work, but I tried it and it does! wow! thanks! Is this because floatAround(), being declared within function Animation (), is a closure? So the callback still has access to the local variables within Animation? thanks again, Bill On Jun 7, 11:13 pm, mkmanning michaell...@gmail.com wrote: The above post fails due to this: obj.animate({ opacity:myOpacity}, 500); animation(); The animation() function will be called immediately each time. It should be in obj.animate's callback function. That being said, the OP was asking how to do this without resorting to setTimeout(). To do that, in your Animation function just set a var to 'this': var Animation = function(elementID){ var _this = this; this.opa = 1; this.floatAround = function(){ ... then refer to it in your callback: 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. } On Jun 7, 10:02 pm, waseem sabjee waseemsab...@gmail.com wrote: var obj = $(div): // i want my objects opacity to go to 1 to 0.6 then follow that pattern var animeframe = 0; var myOpacity; function animation() { setTimeout(function() { if(animeframe == 0) { myOpacity = 0.6; animeframe = 1;} else if(animeframe == 1) { myOpacity = 1; animeframe = 0;} obj.animate({ opacity:myOpacity}, 500); animation(); }, 1000); } The Above animation function has some code wrapped in a setTimeout recalling the function after x seconds I then access my variable to define to which frame the animation should be on and what the properties are to set for that frame. i then do the animation and recall the function This will loop endlessly between frame one and two as the end can never me achieved. On Mon, Jun 8, 2009 at 3:11 AM, Bill bill.fisher.oakl...@gmail.com wrote: I think you may have misunderstood what I am trying to do. I need to refer to the instance of the Animation object. Within the callback, this already refers to the HTML Element. On Jun 7, 4:40 pm, Gustavo Salomé gustavon...@gmail.com wrote: try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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() *
[jQuery] Re: animate callback scope for infinite loop?
The above post fails due to this: obj.animate({ opacity:myOpacity}, 500); animation(); The animation() function will be called immediately each time. It should be in obj.animate's callback function. That being said, the OP was asking how to do this without resorting to setTimeout(). To do that, in your Animation function just set a var to 'this': var Animation = function(elementID){ var _this = this; this.opa = 1; this.floatAround = function(){ ... then refer to it in your callback: 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. } On Jun 7, 10:02 pm, waseem sabjee waseemsab...@gmail.com wrote: var obj = $(div): // i want my objects opacity to go to 1 to 0.6 then follow that pattern var animeframe = 0; var myOpacity; function animation() { setTimeout(function() { if(animeframe == 0) { myOpacity = 0.6; animeframe = 1;} else if(animeframe == 1) { myOpacity = 1; animeframe = 0;} obj.animate({ opacity:myOpacity}, 500); animation(); }, 1000); } The Above animation function has some code wrapped in a setTimeout recalling the function after x seconds I then access my variable to define to which frame the animation should be on and what the properties are to set for that frame. i then do the animation and recall the function This will loop endlessly between frame one and two as the end can never me achieved. On Mon, Jun 8, 2009 at 3:11 AM, Bill bill.fisher.oakl...@gmail.com wrote: I think you may have misunderstood what I am trying to do. I need to refer to the instance of the Animation object. Within the callback, this already refers to the HTML Element. On Jun 7, 4:40 pm, Gustavo Salomé gustavon...@gmail.com wrote: try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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! -- Gustavo Salome Silva
[jQuery] Re: animate callback scope for infinite loop?
Hi everyone, Thanks for your replies! I was about to reply to mkmanning and say that his solution would not work, but I tried it and it does! wow! thanks! Is this because floatAround(), being declared within function Animation (), is a closure? So the callback still has access to the local variables within Animation? thanks again, Bill On Jun 7, 11:13 pm, mkmanning michaell...@gmail.com wrote: The above post fails due to this: obj.animate({ opacity:myOpacity}, 500); animation(); The animation() function will be called immediately each time. It should be in obj.animate's callback function. That being said, the OP was asking how to do this without resorting to setTimeout(). To do that, in your Animation function just set a var to 'this': var Animation = function(elementID){ var _this = this; this.opa = 1; this.floatAround = function(){ ... then refer to it in your callback: 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. } On Jun 7, 10:02 pm, waseem sabjee waseemsab...@gmail.com wrote: var obj = $(div): // i want my objects opacity to go to 1 to 0.6 then follow that pattern var animeframe = 0; var myOpacity; function animation() { setTimeout(function() { if(animeframe == 0) { myOpacity = 0.6; animeframe = 1;} else if(animeframe == 1) { myOpacity = 1; animeframe = 0;} obj.animate({ opacity:myOpacity}, 500); animation(); }, 1000); } The Above animation function has some code wrapped in a setTimeout recalling the function after x seconds I then access my variable to define to which frame the animation should be on and what the properties are to set for that frame. i then do the animation and recall the function This will loop endlessly between frame one and two as the end can never me achieved. On Mon, Jun 8, 2009 at 3:11 AM, Bill bill.fisher.oakl...@gmail.com wrote: I think you may have misunderstood what I am trying to do. I need to refer to the instance of the Animation object. Within the callback, this already refers to the HTML Element. On Jun 7, 4:40 pm, Gustavo Salomé gustavon...@gmail.com wrote: try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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.
[jQuery] Re: animate callback scope for infinite loop?
I get it now. It's simply the normal scope rules. this.callback() inherits the variables of all the functions above itself in the scope chain, so var _this can be seen, but this._this cannot -- that would reference the invocation context of the callback, which is the HTML element object. thanks again! On Jun 8, 11:58 am, Bill bill.fisher.oakl...@gmail.com wrote: Hi everyone, Thanks for your replies! I was about to reply to mkmanning and say that his solution would not work, but I tried it and it does! wow! thanks! Is this because floatAround(), being declared within function Animation (), is a closure? So the callback still has access to the local variables within Animation? thanks again, Bill On Jun 7, 11:13 pm, mkmanning michaell...@gmail.com wrote: The above post fails due to this: obj.animate({ opacity:myOpacity}, 500); animation(); The animation() function will be called immediately each time. It should be in obj.animate's callback function. That being said, the OP was asking how to do this without resorting to setTimeout(). To do that, in your Animation function just set a var to 'this': var Animation = function(elementID){ var _this = this; this.opa = 1; this.floatAround = function(){ ... then refer to it in your callback: 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. } On Jun 7, 10:02 pm, waseem sabjee waseemsab...@gmail.com wrote: var obj = $(div): // i want my objects opacity to go to 1 to 0.6 then follow that pattern var animeframe = 0; var myOpacity; function animation() { setTimeout(function() { if(animeframe == 0) { myOpacity = 0.6; animeframe = 1;} else if(animeframe == 1) { myOpacity = 1; animeframe = 0;} obj.animate({ opacity:myOpacity}, 500); animation(); }, 1000); } The Above animation function has some code wrapped in a setTimeout recalling the function after x seconds I then access my variable to define to which frame the animation should be on and what the properties are to set for that frame. i then do the animation and recall the function This will loop endlessly between frame one and two as the end can never me achieved. On Mon, Jun 8, 2009 at 3:11 AM, Bill bill.fisher.oakl...@gmail.com wrote: I think you may have misunderstood what I am trying to do. I need to refer to the instance of the Animation object. Within the callback, this already refers to the HTML Element. On Jun 7, 4:40 pm, Gustavo Salomé gustavon...@gmail.com wrote: try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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
[jQuery] Re: animate callback scope for infinite loop?
try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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! -- Gustavo Salome Silva
[jQuery] Re: animate callback scope for infinite loop?
I think you may have misunderstood what I am trying to do. I need to refer to the instance of the Animation object. Within the callback, this already refers to the HTML Element. On Jun 7, 4:40 pm, Gustavo Salomé gustavon...@gmail.com wrote: try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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! -- Gustavo Salome Silva
[jQuery] Re: animate callback scope for infinite loop?
var obj = $(div): // i want my objects opacity to go to 1 to 0.6 then follow that pattern var animeframe = 0; var myOpacity; function animation() { setTimeout(function() { if(animeframe == 0) { myOpacity = 0.6; animeframe = 1; } else if(animeframe == 1) { myOpacity = 1; animeframe = 0; } obj.animate({ opacity:myOpacity}, 500); animation(); }, 1000); } The Above animation function has some code wrapped in a setTimeout recalling the function after x seconds I then access my variable to define to which frame the animation should be on and what the properties are to set for that frame. i then do the animation and recall the function This will loop endlessly between frame one and two as the end can never me achieved. On Mon, Jun 8, 2009 at 3:11 AM, Bill bill.fisher.oakl...@gmail.com wrote: I think you may have misunderstood what I am trying to do. I need to refer to the instance of the Animation object. Within the callback, this already refers to the HTML Element. On Jun 7, 4:40 pm, Gustavo Salomé gustavon...@gmail.com wrote: try $this=$(elementID); 2009/6/7 Bill bill.fisher.oakl...@gmail.com 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! -- Gustavo Salome Silva