Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

combining js ajax and spry effects

simple looking code gone wrong

3:37 pm on Jun 11, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
votes: 0

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


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!

4:10 pm on June 11, 2009 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Dec 15, 2003
votes: 5

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

Spry API: (left nav: -> Spry Effects -> Fade)

Spry Fade Examples

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)

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.

1:03 am on June 12, 2009 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 25, 2004
votes: 0

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?


Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members