11548 sujets

JavaScript, DOM et API Web HTML5

Ouvrir et fermer mon menu avec fonction animate

Bonjour à toutes et à tous,

Je veux qu'au survol de mon header un sous-menu apparaisse...
Je suis parvenu à faire ce que je voulais mais il y a beaucoup de beug !

Je ne suis pas du tout un expert en jQuery donc mon code n'est peut-être pas très propre mais ça donne ça :

<body>
	<header>
    	<section id="barre_header">
            <div><ul id="menu">
            	<li id="projets"><a href="#">un</a></li>
            	<li id="contact"><a href="#">deux</a></li>
                <li id="infos"><a href="#">trois</a></li>
            </ul></div>
        </section>
        <section id="header_survol">
                <ul id="actu">
                	<li><a href="#">actu 1</a></li>
                	<li><a href="#">actu 2</a></li>
                </ul>
                <ul id="categorie">
                	<li><a href="#">catégorie 1</a></li>
                	<li><a href="#">catégorie 2</a></li>
                	<li><a href="#">catégorie 3</a></li>
                </ul>
                <ul id="partage">
                	<li><a href="#">facebook</a></li>
                	<li><a href="#">twitter</a></li>
                </ul>
        </section>
    </header>
    <div id="page">
        <ul id="boite">
            <li class="motion"><a href="sante2013.html">
                <section>
                        <h3>SANTÉ 2012</h3>
                        <h4>motion</h4>
                </section>
            </a></li>
        </ul>
	</div>
</body>


et mon js :
$('#header_survol').css('display','none');
	
	
	$(function() {
		$('header').mousemove(function() {
			$('header').animate({height: "230px"}, 400 );
			$("#page").animate({paddingTop: "270px"}, 400 );
			$("#header_survol").fadeIn(500);
		});
	});
	
	$(function() {
		$('header').mouseleave(function() {
			$('header').animate({height: "55px"}, 400 );
			$("#page").animate({paddingTop: "100px"}, 400 );
			$("#header_survol").fadeOut(500);
		});
	});



Voilà tout, si vous avez des idées, je suis preneurs...
Merci
Bonjour 33tours,

mousemove est la pour detecté un mouvement de souris dans un élément essaye de le remplacer par un mouseenter
Ça va mieux merci !!!

À celà j'ai ajouté des .stop() devant mes .animate parce que ça beugait encore un peu.
Du coup quand je quitte le header le stop permet d'arrêter l'animation d'apparition et d'enchainer par l'animation de fermeture Smiley cligne .

Merci beaucoup.
Sujet clos
Aller à