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
