pb de logique motion tween

par **Invité** » 18 juil. 2010, 12:58

Bonjour a tous,
j'essaye de construire une animation en javascript qui me pose de gros problèmes de logique.
Ce que je veux faire: j'ai une série de divs dans ma page, alignés horizontalement l'un à côté de l'autre avec du css. ca représente un menu.

J'ai également un curseur nommé "menu_slider" qui se déplace quand la souris fait un mouseover sur un élément de menu, pour se positionner au dessus de l'élément concerné.
Le déplacement du curseur est un tween géré par une classe très sympathique et bien documentée qui se trouve ici: http://jstween.blogspot.com/

La classe est très simple. Pour lancer un tween, ils suffit en gros d'une ligne:

var t = new Tween(
slider.style, //css de l'élément à déplacer
'left', //propriété css à modifier dans le tween
Tween.strongEaseOut, //type de déplacement, voir robert penner
0, //point de départ
100, //point d'arrivée
1,  //durée du déplacement
'px' //unité à utiliser pour départ et arrivée
); 
t.start();

Mon animation fonctionne presque bien.
Quand ma souris passe au dessus un élément, le curseur se déplace aussi.
Là commencent mes soucis: je n'arrive pas à récupérer la position courante du curseur pour gérer le point de départ du prochain déplacement.

Pour visualiser un exemple cliquez ici
Vous verrez un menu de test tout en haut de page.

Voici le code js qui fait bouger le curseur (ya un peu de moootools...)

window.addEvent('domready', function() {
		//get menu items
		var elts = $$(".menu_block");
		var moved = false;
        elts.each(function(elts) {
		//apply behaviour to each menu item
		elts.addEvent('mouseenter', function(event) {
										
			//get orange slider
			var slider = document.getElementById("menu_slider");

			//tween
			var t = new Tween(slider.style, 'left', Tween.strongEaseOut, 0, 100, 1, 'px'); 
			t.start();   
									
			t.onMotionFinished = function(event){							
			   //alert(event.target._pos);
			};
     });


});
		
});

Les éléments de menu et le curseur sont tous en position absolute. Le code modifie simplement la propriété 'left' du curseur.
Remarquez- le onMotionFinished, un événement de la classe qui permet de déclencher une fonction à la fin d'un déplacement.

Ma question est (enfin...): comment déplacer le curseur à partir de sa position courante, et non de 0 à 100 comme actuellement?

Je suis sous motools 1.1. Ca serait certainement plus facile avec mootools 1.2 mais je suis sous Joomla qui utilise le 1.1 et je ne veux pas modifier les éléments de base du cms.
Ci dessous le html et css du menu.
Merci à tous pour tout conseil qui pourrai me faire avancer un peu

<div id="menu_top">
    <div id="menu_slider"></div>

 	<div class="menu_block" id="item_1">
        <div class="menu_block_top"></div>
    </div>
  	<div class="menu_block" id="item_2">
        <div class="menu_block_top"></div>
    </div>
 	<div class="menu_block" id="item_3">
        <div class="menu_block_top"></div>
    </div>
 	<div class="menu_block" id="item_4">
        <div class="menu_block_top"></div>
    </div>

Et le css

#menu_top {
 width: 800px;
 position: relative;
}

#menu_slider {
	background-image: url( '../images/menu_on.png' );
	background-repeat: no-repeat;
	background-position: top left;
	width: 88px;
	height: 8px;
	position: absolute;
	z-index: 10000;
}

.menu_block {
	width: 88px;
	position: absolute;
	z-index: 9000;
}

.menu_block_top {
	background-image: url( '../images/menu_off.png' ) !important;
	background-repeat: no-repeat !important;
	background-position: top left !important;
	width: 88px !important;
	height: 8px !important;
}

pb de logique motion tween

Répondre

Étendre la vue Revue du sujet : pb de logique motion tween

pb de logique motion tween