Using .load() with fadeIn() to replace content

Alright I have tried a few different approaches none of witch I'm gratified with so I came to ask.

I've got a wonderful side navigation that I created for one web page. I've tried to make the #content of the page replace with another when a link of the navigation is clicked, I want to make a smooth replacement effect ajax-alike.

I am fairly new to Javascript but found the .replaceWith() thing. Now, I made various manoeuvres with the source but just couldn't make it work. What I tried is using .click() execute .replaceWith() and make it do the replacement by fadeOut() the current content and fadeIn() the new one.

In one of t开发者_运维问答he codes that I wrote it did successfully replace the content by fading but when a user clicked a second time on the navigation link the content would be doubled and tripled..

What's the best way to make a smooth #content-replacing fade in-out effect?

---

You need to hide it first, otherwise fadeIn won't have any effect.

Live example.

In your case, you probably need to use the jQuery get method to load contents of different pages.