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!

Reply via email to