combining js ajax and spry effects

simple looking code gone wrong

[delboy1978uk]

hello all brainy people! :-P

ive recently learned how to fade out a div using spry effects (and fade in too :-P ), and I have also learned how to load fresh html into a div using ajax.

The effect:

user clicks nav link
1. main content fades out (2.5s)
2. fresh content loaded into div
3. div fades back in (2.5s)

The code i thought would work:

<a href="javascript:var fadeout = new Spry.Effect.Fade('inhere',{duration: 2500, from: 100, to: 0, toggle:false});fadeout.start();pause(2500);jah('includes/html/home.html','inhere');var fadein = new Spry.Effect.Fade('inhere',{duration: 2500, from: 0, to: 100, toggle:false});fadein.start();">Home</a>

The result:

the div doesnt fade out
but it still waits 2.5s
then the new content fades in over 2.5s

Observations:

the fade out command on its own works fine.
removing the pause(2500)command makes it just fade straight away, still no fade out

I'm probably doing something stupid, but i would really like some help!

[Demaestro]

You don't want to a pause, I think you want to use duration in the constructor.

Spry API: (left nav: -> Spry Effects -> Fade)
[labs.adobe.com...]

Spry Fade Examples
[labs.adobe.com...]

If you want to detect when the animation is done and trigger another function set an "observer". (example, you load fresh content and fade in)

Spry API: (left nav: -> Spry Utilities -> Notifier -> addOberver)
[labs.adobe.com...]

Once you add an observer to your animation you can trigger new functions, on postLoad, preLoad or onLoad.

If you have any other questions keep asking.

[delboy1978uk]

wow! thats its sorted and doing what it should! thanks! :-D
now the goalposts have moved - im trying to get the div to smoothly resize vertically now, so that it now:

1. fades out
2. loads fresh html content
3. shrinks or expands div to new content
4. fades in

similar to the behaviour of the collapsible panel of the spry api, only without clicking on anything
any ideas?