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
