Probleme avec script JQuery : animate()
gintoxic
Messages postés
524
Date d'inscription
Statut
Membre
Dernière intervention
-
gintoxic Messages postés 524 Date d'inscription Statut Membre Dernière intervention -
gintoxic Messages postés 524 Date d'inscription Statut Membre Dernière intervention -
bonjour je débute en JQuery (et JS surtout) et je suis en train de mettre un peu de mouvement sur mon site en construction (je vais de tous les cotés mais comme c'est un site perso, pas trop de souci).
je tente d'utiliser JQuery pour ce faire et je suis devant un petit souci avec un script qui a pour effet de faire coulisser un bloc (apparition et disparition derriere le bloc central de la page).
j'arrive à le faire apparaitre mais rien à faire pour le callback...
je vou spose le script ici :
pour voir le résultat, voici le lien vers mon site (il s'agit d'une anim en cliquant sur le menu de droite) : http://symposion.fr
j'aurais grand besoin de votre aide svp...
ps : en fait il semble fonctionner une fois par élément puis il merdouille (du moins, je l'ai mal réglé)
merci par avance
je tente d'utiliser JQuery pour ce faire et je suis devant un petit souci avec un script qui a pour effet de faire coulisser un bloc (apparition et disparition derriere le bloc central de la page).
j'arrive à le faire apparaitre mais rien à faire pour le callback...
je vou spose le script ici :
$(document).ready(function(){
$('#saga').click(function(){
$('.saga').animate({marginLeft:'1285px'}, 1000, function(){
$('#saga').click(function(){
$('.saga').animate({marginLeft:'1000px'}, 1000);
});
});
});
$('#parox').click(function(){
$('#text-parox').animate({marginLeft:'1285px'}, 1000, function(){
$('#parox').click(function(){
$('#text-parox').animate({marginLeft:'1000px'}, 1000);
});
});
});
$('#ttssl').click(function(){
$('#text-ttssl').animate({marginLeft:'1285px'}, 1000, function(){
$('#ttssl').click(function(){
$('#text-ttssl').animate({marginLeft:'1000px'}, 1000);
});
});
});
});
pour voir le résultat, voici le lien vers mon site (il s'agit d'une anim en cliquant sur le menu de droite) : http://symposion.fr
j'aurais grand besoin de votre aide svp...
ps : en fait il semble fonctionner une fois par élément puis il merdouille (du moins, je l'ai mal réglé)
merci par avance
A voir également:
- Probleme avec script JQuery : animate()
- Script vidéo youtube - Guide
- Mas script - Accueil - Windows
- Ghost script - Télécharger - Polices de caractères
- Script cmd - Guide
- Script download - Télécharger - Édition & Programmation
3 réponses
Bonsoir,
Le comportement est normal, les 2 clicks se cumulent, expliquant le retour non voulu.
Je te conseillerai d'utiliser une méthode plus simple avec un indicateur de position (possaga) et un marginLeft associé (posx).
Voici un exemple de code pour le #saga à répliquer pour les 2 autres items :
$(document).ready(function(){
var possaga=0, posx=[1285,1000];
$('#saga').click(function(){
$('.saga').animate({marginLeft:posx[possaga]},1000);
possaga+=1; if (possaga>1) possaga=0;
});
Le comportement est normal, les 2 clicks se cumulent, expliquant le retour non voulu.
Je te conseillerai d'utiliser une méthode plus simple avec un indicateur de position (possaga) et un marginLeft associé (posx).
Voici un exemple de code pour le #saga à répliquer pour les 2 autres items :
$(document).ready(function(){
var possaga=0, posx=[1285,1000];
$('#saga').click(function(){
$('.saga').animate({marginLeft:posx[possaga]},1000);
possaga+=1; if (possaga>1) possaga=0;
});
pas de souci.
Je te donne le code complet à remplacer dans ton fichier hide.js
Testé en local donc normalement cela devrait rouler.
Tiens-moi au courant...
Je te donne le code complet à remplacer dans ton fichier hide.js
$(document).ready(function(){
var possaga=0, posparox=0, posttssl=0, posx=[1285,1000];
$('#saga').click(function(){
$('.saga').animate({marginLeft:posx[possaga]},1000);
possaga+=1; if (possaga>1) possaga=0;
});
$('#parox').click(function(){
$('#text-parox').animate({marginLeft:posx[posparox]},1000);
posparox+=1; if (posparox>1) posparox=0;
});
$('#ttssl').click(function(){
$('#text-ttssl').animate({marginLeft:posx[posttssl]},1000);
posttssl+=1; if (posttssl>1) posttssl=0;
});
});
Testé en local donc normalement cela devrait rouler.
Tiens-moi au courant...
salut et merci pour l'interet que tu portes à mon fil.
j'ai testé et en effet ça fonctionne (visible sur mon site)
je te remercie donc beaucoup (peux tu m'accorder le temps d'une explication plus ou moins détaillée ou un endroit où comprendre ce script stp ?)
pour la suite je souhaite que les blocs apparaissent un à un et non qu'ils se chevauchent......
dois-je ajouter une condition de ce style ?
si (un des blocs est apparant (1285px) et que l'utilisateur selectionne un autre bloc) {
cache le bloc visible (1000px) et joue le script précédent;
}
je crois avoir lu qu'avec JQuery, on peut "généraliser" un évènement pour plusieurs éléments mais je ne retrouve pas ce chapitre (je ne sais plus s'il s'agit de .target.event...
une idée ?
merci encore SweetRiver (j'aimerais savoir faire ce genre de script, ne serait-ce que pour aider les autres debs comme moi ;o)
j'ai testé et en effet ça fonctionne (visible sur mon site)
je te remercie donc beaucoup (peux tu m'accorder le temps d'une explication plus ou moins détaillée ou un endroit où comprendre ce script stp ?)
pour la suite je souhaite que les blocs apparaissent un à un et non qu'ils se chevauchent......
dois-je ajouter une condition de ce style ?
si (un des blocs est apparant (1285px) et que l'utilisateur selectionne un autre bloc) {
cache le bloc visible (1000px) et joue le script précédent;
}
je crois avoir lu qu'avec JQuery, on peut "généraliser" un évènement pour plusieurs éléments mais je ne retrouve pas ce chapitre (je ne sais plus s'il s'agit de .target.event...
une idée ?
merci encore SweetRiver (j'aimerais savoir faire ce genre de script, ne serait-ce que pour aider les autres debs comme moi ;o)
Bonsoir,
Voici le détail et si tu as des questions, n'hésite pas.
@+
Voici le détail et si tu as des questions, n'hésite pas.
$(document).ready(function(){
var possaga=0, posparox=0, posttssl=0, posx=[1285,1000]; // Les 2 positions (0 = initiale / 1 = décalée) pour les 3 items + pox[]= les marginLeft correspondants
$('#saga').click(function(){
$('.saga').animate({marginLeft:posx[possaga]},1000); // initialement, possaga=0, donc posx[0]=1285 _ Si possaga=1, le marginLeft sera celui initial, soit 1000.
possaga+=1; if (possaga>1) possaga=0; // On incrémente possaga mais si possaga>1 (impossible car seulement 2 états), sa valeur sera de nouveau 0
});
// Les 2 autres items fonctionnent sur le même principe que #saga...
$('#parox').click(function(){
$('#text-parox').animate({marginLeft:posx[posparox]},1000);
posparox+=1; if (posparox>1) posparox=0;
});
$('#ttssl').click(function(){
$('#text-ttssl').animate({marginLeft:posx[posttssl]},1000);
posttssl+=1; if (posttssl>1) posttssl=0;
});
});
@+
salut et merci
je ne vois pas d'accolade {} a cette condition comme en programmation habituelle et ça me perturbait :s
posx est une fonction/méthode prédéfinie ?
pourquoi lorsque tu crée (je suppose que tu crées un tableau...) posx[], 1000 est en 2eme position, alors que c'est son point de départ ? est-ce si important l'ordre d'ailleurs ?
si je crmprends bien, lorsque ej souhaite créer un effet de va et vient, j'utilise posx[] dans lequel je définie 2 valeurs qui sont les position d'un bloc (entre autre); ce qui permet de jouer entre ses deux valeurs pour créer un mouvement...
je demande, car je dois créer une double vitre qui coulisse au dessus du menu lorsque que l'on clic de ssus et revient a sa place a un autre clic... (seule différence en gros c'est que lorsque les deu xparties de la vitrine s'écartent l'une de l'autre pour laisser apparaitre le menu, elle disparaisse dans un néant (je pense que je vais devoir jongler avec les div et leur z-index...)
merci encore pour ton aide à ma ompréhension ;o)
if (posttssl>1) posttssl=0;
je ne vois pas d'accolade {} a cette condition comme en programmation habituelle et ça me perturbait :s
posx est une fonction/méthode prédéfinie ?
pourquoi lorsque tu crée (je suppose que tu crées un tableau...) posx[], 1000 est en 2eme position, alors que c'est son point de départ ? est-ce si important l'ordre d'ailleurs ?
si je crmprends bien, lorsque ej souhaite créer un effet de va et vient, j'utilise posx[] dans lequel je définie 2 valeurs qui sont les position d'un bloc (entre autre); ce qui permet de jouer entre ses deux valeurs pour créer un mouvement...
je demande, car je dois créer une double vitre qui coulisse au dessus du menu lorsque que l'on clic de ssus et revient a sa place a un autre clic... (seule différence en gros c'est que lorsque les deu xparties de la vitrine s'écartent l'une de l'autre pour laisser apparaitre le menu, elle disparaisse dans un néant (je pense que je vais devoir jongler avec les div et leur z-index...)
merci encore pour ton aide à ma ompréhension ;o)
