11550 sujets

JavaScript, DOM et API Web HTML5

JQuery, Easing et problème d'effets qui se succèdent

Le titre est pas très explicite mais je m'explique.

Pour les besoins d'un site, le résultat voulu s'approche du menu de ce site :
http://infos.blanquefort.net/Echappeebelle/

Et même, je n'ai pas besoin de la déformation en largeur, juste de l'effet de glissement (BounceOut).

Mon problème est que dans un premier temps, j'ai parfaitement réussi mon effet à l'aide de MooTools mais par la suite j'ai utilisé sur le site d'autres codes basés sur JQuery (comme ThickBox par exemple) et les 2 sont incompatibles.

Aussi, la meilleur solution serait de réaliser le même effet avec Jquery et...
...
c'est chose faite Smiley biggrin

MAIS Smiley fache
et on arrive à mon problème !

Quand je me déplace sur le menu horizontale, l'effet se réalise à chaque partie.
Et donc si je vais d'un bout à l'autre du menu, le fond de couleur se glisse avec l'effet derrière chacune des parties.
-> C'est très lent et pas beau
Et si on s'amuse à déplacer la souris un peu partout, on en a pour 5 minutes d'effets lol

A mon avis, il doit y avoir un moyen de dire à mon code de laisser la dernière action prioritaire mais ???

Pour info, voici en gros le code de mon menu :

<div id="hs_menu"><ul>
<li onclick="window.location.href='lelien'>Titre 1</li>
<li onclick="window.location.href='lelien'>Titre 2</li>
<li onclick="window.location.href='lelien'>Titre 3</li>
<li onclick="window.location.href='lelien'>Titre 4</li>
<li onclick="window.location.href='lelien'>Titre 5</li>
<li onclick="window.location.href='lelien'>Titre 6</li>
</ul></div>


Et pour l'animation :

$(document).ready(function() {
	var method = "bounceout";
	var dur = 1500;
	var box = "hs_menu";
	$("#"+box+" ul").find("li").each(function(){
		$(this).bind('mouseover', function(event){
			var val_left = this.offsetLeft;
			$("#target").animate({left: val_left + 5}, {duration: dur, easing: method});
		});
	});
});



J'espère que mon message est compréhensible Smiley bawling

Merci !
Modifié par BakaToy (17 Aug 2007 - 15:44)

<div id="hs_menu"><ul>
<li onclick="window.location.href='lelien'>Titre 1</li>
<li onclick="window.location.href='lelien'>Titre 2</li>
<li onclick="window.location.href='lelien'>Titre 3</li>
<li onclick="window.location.href='lelien'>Titre 4</li>
<li onclick="window.location.href='lelien'>Titre 5</li>
<li onclick="window.location.href='lelien'>Titre 6</li>
</ul></div>

Mais quelle est cette horreur Smiley eek

tu peux me dire à quoi sert ton window.location ?
pourquoi ne pas utiliser des <a href=""> comme tout le monde ?

<div id="hs_menu"><ul>
<li><a href="#">Titre 1</a></li>
<li><a href="#">Titre 2</a></li>
<li><a href="#">Titre 3</a></li>
<li><a href="#">Titre 4</a></li>
<li><a href="#">Titre 5</a></li>
<li><a href="#">Titre 6</a></li>
</ul></div>

Modifié par Gatsu35 (17 Aug 2007 - 20:13)
Car la div est plus grande que le texte du lien et il faut que toute la div soit cliquable.
D'où le loc.href et en css je change le pointeur de la souris en main sur le survol. Smiley smile


Mais ce n'est pas mon problème Smiley sweatdrop

Est-ce que quelqu'un sait si avec la gestion des event, je pourrais résoudre mon problème ?
Sujet clos
Aller à