SlideDown() et affichage

Bonjour à tous,

Alors voilà, je souhaiterais utiliser l'effet slideDown(), pour afficher un div caché, qui remplace en fait le div courant.

J'ai mis le script en place, mais cela ne donne pas du tout le resultat escompté.
En effet, premièrement le slide va du bas vers le haut, et deuxiemement il commence en milieu de page au lien de partir du bord supérieur de l'écran...

Je voudrais que l'ecran d'accueil, et que le nouveau div apparaisse en slide du bord supérieur de l'ecran...

Quelle est mon erreur ?

Voici ma page pour l'instant : lien vers la page

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function() {
	$("#second-navigation a").click(function() {
		$("article").hide();
		$($(this).attr("href")).show();
		return false;
	});
 
	$("#main-navigation a").click(function() {
		$("article").hide();
		$($(this).attr("href")).slideDown();
		return false;
	});
 
	$( window ).load( function(){
		$("article").hide();
		$("#home").show();
	});
});

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- START CONTAINER -->
<nav id="second-navigation">
	<ul>
		<li><a href="#french">French</a></li>
		<li><a href="#english">English</a></li>
	</ul>
</nav>
 
<article id="french">
	<section class="container">
		<h1>French</h1>
		<p>Nunc fermentum mauris bibendum odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec turpis rhoncus volutpat et dignissim ipsum.Nunc fermentum mauris bibendum odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec turpis rhoncus volutpat et dignissim ipsum.</p>
	</section>
</article>
 
<article id="home">
	<section class="container">
		<nav id="main-navigation">
			<ul>
				<li><a href="#french">French</a></li>
				<li><a href="#english">English</a></li>
			</ul>
		</nav>
	</section>
</article>
 
<article id="english">
	<section class="container">
		<h1>English</h1>
		<p>Nunc fermentum mauris bibendum odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec turpis rhoncus volutpat et dignissim ipsum.Nunc fermentum mauris bibendum odio volutpat facilisis. Proin eu mattis metus. Quisque a elementum lacus. Phasellus lobortis, lorem a fermentum hendrerit, metus risus lacinia nisi, sagittis accumsan turpis ante non mi? Cras id metus nec turpis rhoncus volutpat et dignissim ipsum.</p>
	</section>
</article>
<!-- END CONTAINER -->

Un grand merci !