exscale.se

Fade an Entire Design Using jQuery

Published Saturday, February 17, 2007 in CSS, Javascript, jQuery

I've been using jQuery lately at work to create some pretty cool effects and tabs, and I must say I'm starting to like it more and more.

I had an idea to morph a website's design from one to another, so i created this little test (Click anywhere on the page to fade to the other design).
It didn't turn out exactly as cool as I first had hoped, because all I really do is fade out body, change its class and fade it back in.
You could however potentially animate every CSS attribute that differs in the two design, and create a really fuckin neat morph.
I could not be arsed though, cus that would mean putting all the CSS in the js-file.

Also the fade is a bit sketchy. I don't understand why the "Round" design jumps up and down like that, but i guess it's something i have to live with.

I can't use this on my style-switcher though, because changing a style on my site not only changes CSS attributes, but includes other JS-files etc.
And also i can't be arsed to go through every design i've made and put a body.design-n in front of every selector.

Anyhoo, check it out.

Edit: i just realized that instead of changing the class of the body (and having to use body.design-n in the CSS) one could simply change the href attribute of the link element with media "screen".
I can't be bothered to change the example though.

Andrew

Monday, February 19, 2007 | View all comments by Andrew

Coolt man, coolt!

jaysus

Friday, November 02, 2007 | View all comments by jaysus

This is soooooo fresh! And your code is cleaner than a monk's bathroom!

Andreas

Saturday, November 03, 2007

Hehe, cheers! I always strive to keep my HTML as clean as possible.

Justin

Tuesday, December 18, 2007 | View all comments by Justin

I was wondering if you could pint me to somewhere I could do a similar trick to this. I want to fade out and then back in just a single div with new information without flash.

~ J.

Andreas

Tuesday, December 18, 2007 | View all comments by Andreas

Check out jquery.com's tutorial section. You can learn loads there.

To do what you want (if I understand you correctly), you'd do something like this:

$('body').fadeOut(500, function() {
    $(this).html(newContent).fadeIn(500);
});

Where newContent is a variable containing the new HTML.

Big balloon guy

Sunday, March 16, 2008 | View all comments by Big balloon guy

I kinda like it, try to use it on bubblexl, let you know!

Magicien

Tuesday, November 11, 2008 | View all comments by Magicien

I've been using jQuery lately at work , it's superb :-)

Guignol

Tuesday, December 30, 2008 | View all comments by Guignol

Ok, thank for your comment and happy new year 2009