[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 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 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 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 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 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,
[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 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 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 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 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
> > > > 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é wrote:
> > > > > > try
> > > > > > $this=$(elementID);
>
> > > > > > 2009/6/7 Bill
>
> > > > > > > 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
> > > >
[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 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 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 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
> > > 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é wrote:
> > > > > try
> > > > > $this=$(elementID);
>
> > > > > 2009/6/7 Bill
>
> > > > > > 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(){
> > > > > >
[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 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 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 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é wrote:
> > > > try
> > > > $this=$(elementID);
>
> > > > 2009/6/7 Bill
>
> > > > > 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(){
>
[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 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 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é wrote:
> > > try
> > > $this=$(elementID);
>
> > > 2009/6/7 Bill
>
> > > > 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 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é wrote:
> > try
> > $this=$(elementID);
> >
> > 2009/6/7 Bill
> >
> >
> >
> >
> >
> > > 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é wrote:
> try
> $this=$(elementID);
>
> 2009/6/7 Bill
>
>
>
>
>
> > 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?
try
$this=$(elementID);
2009/6/7 Bill
>
> 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
