[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
