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
