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
