Admin Forum:JavaScript help needed

I want the following to happen using JavaScript/jQuery: I predict the code would look something like this for the first bullet point: -- Sam Wang (talk) 11:13, July 15, 2012 (UTC)
 * When id "back" clicked, replace id "projects" with "list-projects"
 * When id "project-1" is clicked, replace id "projects" with "info-1" (repeat this for project-2 and info-2 and so up to 18)
 * Whilst replacing the original thing with the one to replace with when an id is clicked, make the original one fade out, and the new one fade in
 * I want this to be ajax, so please do not reload the page to do it


 * That's a good start. You can use load to fetch data from the server via AJAX. And you can achieve that visual effect with fadeIn and fadeOut. --


 * Thanks! -- Sam Wang (talk) 22:42, July 15, 2012 (UTC)


 * How to combine the fadeIn and fadeOut functions together with the load function? -- Sam Wang (talk) 22:57, July 15, 2012 (UTC)


 * Here was a test code I wrote, but as you can see here, it didn't work:

Sam Wang (talk) 23:03, July 15, 2012 (UTC)

You forgot the parentheses on the second line and there is no element with the ID project-1. --


 * I've just fixed that and added return false to the script, but it won't even load the page, and how to combine the fadeIn and fadeOut styles with the load function? -- Sam Wang (talk) 23:35, July 15, 2012 (UTC)


 * There is no page entitled "/wiki/Happylander/Project:Gamiacs", Sam. --


 * Thanks! However, how about the fading styles. I don't know how to combine it with the load funtion -- Sam Wang (talk) 23:52, July 15, 2012 (UTC)


 * Fade the #list-projects container out, then load the new contents and fade it back in. Both - fadeOut and fadeIn - would be inside the click-handler, but only the fadeIn would be inside the load-handler. --

I really need an example. How should I add it to the following code? Also, now I have another question: whilst it is loading the page I want to load, can I make it display a image (bit like what you did for the InfoWidgets)? -- Sam Wang (talk) 00:30, July 16, 2012 (UTC)


 * In addition to that, it somehow won't hide the id "back" when it starts. I've added some more to the code located in the Common.js file, and can you have a look please? -- Sam Wang (talk) 00:43, July 16, 2012 (UTC)


 * Try this:




 * (adjusted to further adjustments to the code) The code


 * doesn't even work with ajax! Also, the back id seems to have a problem &mdash; I want to hide it when the document has finished loading, but it displays it when the page loads, and hides it when the page is loaded -- Sam Wang (talk) 00:59, July 16, 2012 (UTC)