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
>
