As usual, Walter's on the nose.

FWIW, I'd add an effect queue[1] (and semicolons ;-) ) to Walter's
simpler option below:

function update_clock(){
        var clock = $('clock');
        var opts = {queue: 'q' + new Date().getTime()};
        new Ajax.Updater(clock,'clock.py',{
                onCreate:function(){clock.fade(opts);},
                onComplete:function(){clock.appear(opts);}
        });
}

If you find that the update is happening too quickly (so you don't
really see the fade effect), then you might consider using
`afterFinish` as in Walter's original reply, although that means the
clock is invisible for the entire time it takes for the Ajax call to
occur.  Or you might ensure it will always get 0.2 or more seconds to
fade:

function startClockUpdate(){
        var clock = $('clock');
        var opts = {queue: 'q' + new Date().getTime()};
        clock.fade(opts);
        continueClockUpdate.delay(0.2, clock, opts); // 0.2 = 2/10ths
of a second
}
function continueClockUpdate(clock, opts) {
        new Ajax.Updater(clock,'clock.py',{
            onComplete:function(){clock.appear(opts);}
        });
}

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com

On Oct 4, 5:36 pm, Walter Lee Davis <wa...@wdstudio.com> wrote:
> Or even simpler:
>
> function update_clock(){
>         var clock = $('clock');
>         new Ajax.Updater(clock,'clock.py',{
>                 onCreate:function(){clock.fade()},
>                 onComplete:function(){clock.appear()}
>         });
>
> }
>
> Walter
>
> On Oct 4, 2009, at 12:32 PM, Walter Lee Davis wrote:
>
>
>
>
>
> > You have some asynchronous events here, each being triggered
> > separately, and the results are chaotic.
>
> > Try this:
>
> > function update_clock() {
> >    Effect.Fade('clock',
> >            afterFinish:function(){
> >                    new Ajax.Updater('clock',
> >                            'clock.py',{
> >                                    onComplete:function(){
> >                                            Effect.Appear('clock');
> >                                    }
> >                            }
> >                    );
> >            }
> >    );
> > }
>
> > You could also investigate effect queues, but I think this sort of
> > chained function will do you better.
>
> > Walter
>
> > On Oct 4, 2009, at 11:26 AM, LinkMaster03 wrote:
>
> >> What I am trying to accomplish is a clock that updates every five
> >> seconds. Before it updates I want it to fade out, and after it  
> >> updates
> >> I want it to fade back in. This is what I have right now:
>
> >> <html>
> >> <head>
> >>   <script type="text/javascript" src="prototype.js"></script>
> >>   <script type="text/javascript" src="scriptaculous.js"></script>
> >>   <script type="text/javascript">
> >>       function update_clock() {
> >>           Effect.Fade('clock');
> >>           new Ajax.Updater('clock', 'clock.py');
> >>           Effect.Appear('clock');
> >>       }
>
> >>       new Ajax.Updater('clock', 'clock.py');
> >>       new PeriodicalExecuter(update_clock, 5);
> >>   </script>
> >> </head>
> >> <body>
> >>   <div id="clock"></div>
> >> </body>
> >> </html>
>
> >> What happens when I open that page is odd. The clock updates, fades
> >> in, then fades out until the next update. What am I doing wrong?
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups 
"Prototype & script.aculo.us" group.
To post to this group, send email to prototype-scriptaculous@googlegroups.com
To unsubscribe from this group, send email to 
prototype-scriptaculous+unsubscr...@googlegroups.com
For more options, visit this group at 
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---

Reply via email to