I have been working on a different way...just fooling around actually.
This just a semi-failed experiment. don't take too seriously. kinda
new to js . just fooling around.
PROBLEMS
------------------------------------------------------------------------------------------------
if i reset i to 0 most browsers will not allow my script to run
------------------------------------------------------------------------------------------------
var obj = $("#obj");
var frames = 50;
var top = 0;
var left = 0;
loopanimate();
function loopanimate() {
for(var i = 0; i < frames; i++) {
top++;
left++;
obj.animate({
marginLeft:left+"px", marginTop:top+"px" }, 10);
if(i == (frames - 1)) {
} else {
}
}
}
On Jun 11, 6:33 pm, Bill <bill.fisher.oakl...@gmail.com> wrote:
> Just adding some comments to make this thread more complete...
>
> One could also include all the callback code in an anonymous function
> within the arguments to the animate() function. Like this:
>
> $(elementID).animate(
> {opacity:(this.opa),
> marginTop:top+'px',
> marginLeft:left+'px'
> },
> 1000,
> 'linear',
> function(){ //callback
> if(startStop == 1){
> _this.floatAround(); //loop
> }
> }
> );
>
> That would create a closure. But as you can see above, you would
> still need to save the reference to the original context ("_this") to
> be able to call the floatAround() function.
>
> This technique (and the technique of saving the reference to the
> original context suggested by mkmanning) is outlined in the book
> "JQuery in Action" by Bibeault and Katz on page 337. Great book!
>
> On Jun 8, 12:07 pm, Bill <bill.fisher.oakl...@gmail.com> wrote:
>
> > I get it now. It's simply the normal scope rules. this.callback()
> > inherits the variables of all the functions above itself in the scope
> > chain, so var _this can be seen, but this._this cannot -- that would
> > reference the invocation context of the callback, which is the HTML
> > element object.
>
> > thanks again!
>
> > On Jun 8, 11:58 am, Bill <bill.fisher.oakl...@gmail.com> wrote:
>
> > > 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
