probleme avec script JQuery : animate() Fermé

Question

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 :

$(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
Configuration: Windows 7 / Chrome 27.0.1453.94

SweetRiver · Answer

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;
	});

gintoxic · Answer

merci mais soit ca ne fonctionne aps soit je ne sais pas m'y prendre

SweetRiver · Answer

pas de souci.

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...

Probleme avec script JQuery : animate()

3 réponses

Discussions similaires