Problème slideDown saccadé avec JQuery [Résolu]

Bonjour à tous,

J'ai le souci suivant sur la prochaine version de mon site que je suis en train de faire en HTML5 et CSS3 (j'ose!!). J'ai une div qui doit s'afficher ou se masquer avec la fonction Slide de Jquery.
Quand je clique pour afficher ma div, j'ai une légère saccade lorsqu'elle descend alors que quand je la masque elle remonte en "glissant" normalement. Je souhaite donc pouvoir trouver la solution pour qu'elle descends sans avoir cette saccade.

Voici le code html :

<section id="main">
<section id="screen_menu" class="container_12">
    	<section id="section-1" class="menu">
        section1
        </section>
        <!--fin section-1-->
    	<section id="section-2" class="menu">
        section 2
        </section>
        <!--fin section-2-->
        <section id="section-3" class="menu">
        section 3
        </section>
        <!--fin section-3-->
    	<section id="section-4" class="menu">
        section 4
        </section>
        <!--fin section-4-->
        <div class="clear"></div>
    </section>
    <!--fin screen_menu-->
    <section id="bg_slider">
	<section id="slider">
  		<ul>				
			<li><a href="#"><img src="images/slider_images/01.jpg" alt="descriptif" /></a>
            <figure class="slide-content">
        		<h2>Client 1</h2>
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, porttitor eget commodo eu.</p>
        		<p class="read-more"><a href="#">Plus d'infos</a></p>
    		</figure></li>
			<li><a href="#"><img src="images/slider_images/02.jpg" alt="descriptif" /></a>
            <figure class="slide-content">
        		<h2>client 2</h2>
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, porttitor eget commodo eu.</p>
        		<p class="read-more"><a href="#">Plus d'infos</a></p>
    		</figure></li>
			<li><a href="#"><img src="images/slider_images/03.jpg" alt="descriptif" /></a>
            <figure class="slide-content">
        		<h2>Client 3</h2>
        		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis turpis turpis, porttitor eget commodo eu.</p>
        		<p class="read-more"><a href="#">Plus d'infos</a></p>
    		</figure></li>			
		</ul>
	</section>
	<!--fin slider-->
    </section>
    <!--fin bg_slider-->
</section>

Le code CSS :

/* ------------------MAIN
/* ----------------------------- */

#main { width:100%; background:url(../images_css/main_bottom_bg.jpg) no-repeat center bottom, url(../images_css/main_bg.png) repeat-x left bottom; }

.menu { }

et le Javascript :

$(function(){
	var trigger = "";
	var old_trigger = "";
	var screen_section = $("#screen_menu");
	screen_section.hide();
	$(".menu").hide();

	$("#born").click(toggleScreen);
	$("#create").click(toggleScreen);
	$("#love").click(toggleScreen);
	$("#die").click(toggleScreen);
	
	$(".close_btn").click(closeScreen);
	
	function closeScreen(ev)
	{
		if ($("#screen_menu:visible").length>0)
			screen_section.slideUp();
	}
	
	function toggleScreen(ev)
	{
		trigger = $(this).attr("id");
		if ($("#screen_menu:visible").length>0)
		{
			if (trigger==old_trigger)
				screen_section.slideUp();
			else fadoutSection();
		}
		else
		{
			$(".menu", ".section").hide();
			screen_section.slideDown("slow",function() { fadinSection(); });
			
		}
		ev.preventDefault();
		return false;
	}

	function fadoutSection()
	{
		if (old_trigger!="")
		{
			if (old_trigger=="born")
				$("#section-1").fadeOut("slow",function() { fadinSection(); });
			else if (old_trigger=="create")
				$("#section-2").fadeOut("slow",function() { fadinSection(); });
			else if (old_trigger=="love")
				$("#section-3").fadeOut("slow",function() { fadinSection(); });
			else if (old_trigger=="die")
				$("#section-4").fadeOut("slow",function() { fadinSection(); });
		}
	}
	function fadinSection()
	{
		if (trigger=="born")
			$("#section-1").fadeIn("slow", function() { old_trigger = trigger; });
		else if (trigger=="create")
			$("#section-2").fadeIn("slow", function() { old_trigger = trigger; });
		else if (trigger=="love")
			$("#section-3").fadeIn("slow", function() { old_trigger = trigger; });
		else if (trigger=="die")
			$("#section-4").fadeIn("slow", function() { old_trigger = trigger; });
	}
});

Merci de votre aide et de vos réponses.
Modifié par Jeff 2 Papangue (09 Aug 2010 - 09:10)

Bon il suffit que je post pour trouver la soluce :
dans le css :

#screen_menu {height:300px; margin-top:30px;}

.menu { height:300px; }

et ça fonctionne nickel