Discussion :

[vbaguet]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

[danielhagnoul]

Bonsoir

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

article { display: none; }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
$( function(){
 
	/*
	 * Voir la documention : 
	 * http://api.jquery.com/?s=attribut ;
	 * http://api.jquery.com/filter/ et
	 * http://api.jquery.com/not/
	 */
	$( "nav[id$='-navigation'] a" ).click( function(){
		var href = $( this ).attr( "href" );
 
		$( "article" ).filter( ":visible" ).not( href ).slideUp( 500, function(){
			$( href ).slideDown( 500 );
		});
 
		return false;
	});
 
});
 
/*
 * $( window ).load() ne doit pas être
 * inclus dans $( document )ready() ou
 * $( function(){}) qui est la même chose
 * en abrégé.
 */
$( window ).load( function(){
 
	$( "#home" ).slideDown( 500 );
 
});