.Animate(); et simulation hover

Je souhaite animer un pad multidirectionnel avec un petit scénario en JS qui sera le suivant.

Le pad (dans le footer) monte et se positionne le tout avec une petite opacité (ça c'est OK !).

Une fois le pad en place, les hovers s'animent dans le sens des aiguilles d'une montre [UP - RIGHT(next) - DOWN - LEFT(prev)] par une simulation successives de leur hover respectifs :

j'ai fait un *.swf il y a longtemps de ça, illustrant à titre d'exemple ce que je désire. (juste l'animation sur le pad nous intéresse ici). en gros un tour (pas 2 comme sur l'anim flash) et puis l'ensemble des hovers simultanément ... Mais je vais y aller par étape et du coup je commence par l'animation successive. Je ferai l'animation de l'ensemble des hovers par la suite.

Bon je pense être assez compréhensible... enfin du moins plus que le code qui va suivre (je suis graphiste à la base).

$(window).load(function(){
	
	$("#pad").animate({
		marginTop:'-160px',
		opacity:1
	},1000,'easeInOutBack');
	
});

$('#pad').ready(function(){
	$('#pad_up a').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
});
$('#pad_up a').ready(function(){
	$('#pad_next a').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
});
$('#pad_next a').ready(function(){
	$('#pad_down a').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
});
$('#pad_down a').ready(function(){
	$('#pad_prev a').hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});
});

Ce code n'est évidemment pas fonctionnel et on m'a dit devoir utiliser la propriété callback de la fonction .animate();

<script>
$(window).load(function(){
	
	$("#pad").animate({
		marginTop:'-160px',
		opacity:1
	},1000,'easeInOutBack',function(){
          //et la je refais mon code avec un animate
});
	
});
</script>

Je dois imbriquer une animation dans le callback de la précédente... Mais je n'ai aucune idée du comment qu'on fait ensuite .
Modifié par Pooley (24 Feb 2012 - 18:22)

Euh, je vois que tu utilises .hover() de même que sur tes tests sur ton site (avec la nouvelle version).

Seulement, qu'on soit bien d'accord "hover" signifie que ta souris se trouve sur l'élément. Dans ton cas, la souris n'a aucun rapport avec ce que tu veux produire.

Ensuite, pour reprendre ton code de la fin, l'idée serait de jouer avec setTimeout (ou setInterval selon la façon de faire).

Une fois ton animation d'affichage du pad, tu appliques directement ton $('#pad_up a').addClass('hover') pour afficher le premier hover. Après tu joues avec setTimeout pour supprimer cette class au bout de quelques ms. Puis quelques ms ensuite, tu mets ta class hover sur l'élément de droite, puis etc ... pour chaque bouton.

ça devrait être bon comme ça ?

Je vais me renseigner sur le .setTimeout();

En gros en passant de addClass à removeClass je voulais simuler un hover sans, bien sûr, que l'internaute ne fasse quoique ce soit. simplement en activant désactivant en utilisant le callback de la fonction précédente pour déclencher la simulation suivante sur la droite, puis le bas, puis ...

Si tu veux seulement déclencher une fonctions à intervals réguliers, .setTimeout() et .setInterval() peuvent t'aider.

Sinon, tu peux peut-être regardé du côté des évènements custom en jQuery ( .tigger('myCustomEvent') ).

Tu peux t'en sortir relativement facilement si tu peux lier chaque évènements à des éléments du DOM. Sinon le mieux est d'utiliser un plugin permettant une utilisation aisée du pattern pub/sub (qui te permettra d'envoyer des events customs et de les récupérer pour lancer une action).

À ce niveau, il y a le plugin JZpublish pour jQuery -> http://www.joezimjs.com/projects/publish-subscribe-jquery-plugin/

Pooley a écrit :
Je vais me renseigner sur le .setTimeout();

En gros en passant de addClass à removeClass je voulais simuler un hover sans, bien sûr, que l'internaute ne fasse quoique ce soit. simplement en activant désactivant en utilisant le callback de la fonction précédente pour déclencher la simulation suivante sur la droite, puis le bas, puis ...

J'avais bien compris oui, d'où mon explication. Mais simuler un hover, en utilisant .hover() ce n'est plus simuler un hover, c'est l'utiliser

Ce que ça peut donner :

$(up).addClass('hover');
setTimeout(upRemoveHover,100);
setTimeout(rightAddHover,1100);
setTimeout(rightRemoveHover,1200);
setTimeout(downAddHover,2200);
setTimeout(downRemoveHover,2300);
etc.

function upRemoveHover() { $(up).removeClass('hover'); }
etc.

bon, il y a surement d'autres méthodes, mais sans trop de reflexion, c'est simple à faire, et ça marche ...
Modifié par kenor (25 Feb 2012 - 10:27)

Aaah ok je vais essayer cette technique je vous tiens au courant de mon succès ou de mon échec ! Au boulot

@vaxilart : Je regarde aussi du côté de ton plugin ! merci m'sieur pour la piste.
Modifié par Pooley (26 Feb 2012 - 00:08)

Bon comme je suis un vrai noob en JS :
1 - Vaxilart, Je tenterai ça en mode confirmé parce que j'ai pas trop pâné le principe.
2 - Kenor, j'ai fait tout comme tu m'as dit mais ça marche pô
Je sais pas si dans l'exemple que tu donnes Kenor il y a des choses implicites ou non mais voilà ce que j'ai fait... (Et on se moque pas hein ! parce que j'ai l'impression d'avoir fait un truc rigolo là). Au moins la syntaxe est bonne car mon animation du pad s'effectue toujours ^^

$('#pad_up a').addClass('hover');
	setTimeout(upRemoveHover,100);
	setTimeout(rightAddHover,1100);
	setTimeout(rightRemoveHover,1200);
	setTimeout(downAddHover,2200);
	setTimeout(downRemoveHover,2300);
	setTimeout(leftAddHover,3300);
	setTimeout(leftRemoveHover,3400);
	setTimeout(upAddHover,4400);
	setTimeout(upRemoveHover,4500);
	setTimeout(allAddHover,6000);
	setTimeout(allRemoveHover,6400);
	
	function upRemoveHover(){$('#pad_up a').removeClass('hover');}
	function rightAddHover(){$('#pad_next a').addClass('hover');}
	function rightRemoveHover(){$('#pad_next a').removeClass('hover');}
	function downAddHover(){$('#pad_down a').addClass('hover');}
	function downRemoveHover(){$('#pad_down a').removeClass('hover');}
	function leftAddHover(){$('#pad_prev a').addClass('hover');}
	function leftRemoveHover(){$('#pad_prev a').removeClass('hover');}
	function upAddHover(){$('#pad_up a').addClass('hover');}
	function upRemoveHover(){$('#pad_up a').removeClass('hover');}
	function allAddHover(){$('#pad_up a','#pad_next a','#pad_down a','#pad_prev a').addClass('hover');}
	function allRemoveHover(){$('#pad_up a','#pad_next a','#pad_down a','#pad_prev a').removeClass('hover');}

Modifié par Pooley (26 Feb 2012 - 15:00)

On est bien d'accord sur le fait que
- "addClass" ajoute une class
- "removeClass" retire une class
- MAIS que :hover N'EST PAS une class (cf ton css)


Donc à la limite :

#pad_up a:hover[b], #pad_up a.hover[/b]{
	background-position: -63px 0;
	opacity: 1;
	-moz-transition: opacity .5s ease;
}

Modifié par kenor (26 Feb 2012 - 11:53)

On est bien d'accord je me suis fait la même réflexion hier en rédigeant mon post. C'est pas une classe mais un état. Faut donc que j'agisse sur un état sans aucune action de la part de l'internaute.

PS : je t'ai donné une solution au dessus, pas la peine d'agir sur un "état", il suffit de définir une class s'appelant hover.

bon j'arrive pas à le faire fonctionner. Je pense que je vais plutôt utiliser le trigger et les mouseOver/mouseOut ou mousEnter/mouseLeave... mais bon c'est pas gagné.
Modifié par Pooley (27 Feb 2012 - 19:54)