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 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
