Probleme click -> animate jquery

Bonjour j'ai un gros souci avec la fonction click de jquery.

La démo est ici : http://www.playnotes.fr/test/index.php[/url]

J'ai fait un menu accordéon horizontal. Lors du clic sur les barres de menu verticales (decouverte, crescendo, intensifs, iplaynotes) la partie souhaitée du menu s'affiche sans souci grace à a fonction .click(function() { ... animate etc..... La fonction agrandit la bonne div et diminue la div en cours de visionnage également. Jusque la aucun souci.

Pour info le code est :

$(document).ready(function(){
  var current = $("#current");
  var taille_max = 650; //max width
  var taille_min = 46; //min width
  $("#accordeon .encart").click(function() {
    $(current).animate({width: taille_min}, { queue:false, duration:400 });
	$(this).animate({width: taille_max}, { queue:false, duration: 400});
	current = this;
  });
});

Cependant, dans la div Bienvenue (qui est la div affiche par defaut), je souhaite que l'utilisateur puisse clicker sur le mot decouverte en produisant le même effet que le click sur la barre de menu du même nom. Cependant la même fonction click agrandit bien la div decouverte sans reduire la div bienvenue. L'utilisation de mouseover fonctionne par contre très bien.

voila le code de la dite fonction :

$(document).ready(function(){
  var current = $("#current");
  var taille_max = 650; //max width
  var taille_min = 46; //min width
  $("#a_decouverte").click(function() {
        $(current).stop().animate({width: taille_min}, { queue:false, duration:400 });
	$("#decouverte").stop().animate({width: taille_max}, { queue:false, duration: 400});
  });
});

Une idée svp snif ... ?
Modifié par guijaz (04 Apr 2013 - 16:51)

Bonjour,

C'est logique.
Le lien se trouvant dans la div de classe .encart, les 2 codes sont exécutés lorsque l'on clique sur le lien.
Un ptit console.log(current); bien placé le prouve.

Vu l'organisation, (.encart qui contient à la fois le lien et la partie à masquer/afficher), j'ai l'impression qu'un switch case avec variable prenant autre chose que le this (puisque dans l'cas d'un lien ben ds l'os) ferait l'affaire, mais ne connaissant pas jquery, jsais pas comment on fait

Sorry

Edit : Ya pas mal de bon dév sur le forum. Afin qu'ils puissent vous aider, il serait sympa de leur faire un petit http://jsfiddle.net/ avec votre code afin qu'ils puissent tester, modifier et vous apporter une soluce
Modifié par Manhattan (04 Apr 2013 - 17:36)

merci,
tout à fait exact !!
je vais faire ça.

Quelqu'un pourrait-il m'aider pour un dev en jquery. Petit récapitulatif du problème (cf posts précédents).

http://jsfiddle.net/yePcb/

Lorsque l'on clique sur les barres verticales (div de class accordeon-box), on réduit la div en cours et on agrandit la div de classe encart concernée.
Aucun souci jusqu'ici le code js est executé.

Mais lorsque l'on clique sur le lien

<a id="a_decouverte" href="#">Lien cliquable qui deroule la div de class encart et id decouverte</a>

, la div decouverte doit se dérouler et la div en cours se réduire.

Comme les deux codes sont executés, la div id current ne se réduit pas mais seule la découverte s'agrandit.

Une idée ?

Merci d'avance

Quelqu'un pourrait-il m'aider pour un dev en jquery. Petit récapitulatif du problème (cf posts précédents).

http://jsfiddle.net/yePcb/

Lorsque l'on clique sur les barres verticales (div de class accordeon-box), on réduit la div en cours et on agrandit la div de classe encart concernée.
Aucun souci jusqu'ici le code js est executé.

Mais lorsque l'on clique sur le lien

<a id="a_decouverte" href="#">Lien cliquable qui deroule la div de class encart et id decouverte</a>

, la div decouverte doit se dérouler et la div en cours se réduire.

Comme les deux codes sont executés, la div id current ne se réduit pas mais seule la découverte s'agrandit.

Une idée ?

Merci d'avance
Modifié par guijaz (04 Apr 2013 - 18:05)

Bon, comme ça m'agaçait...
Un code qui marche, mais pas du tout optimisé (pas eu l'temps) :

Vous ajoutez un id à chaque div de classe accordeon-box :
pour l'exemple :

<div id="current-link" class="accordeon-box"></div>

<div id="decouverte-link" class="accordeon-box"></div>

etc... (il y en a 5)

Ensuite le code jquery : (je répète, pas optimisé, pas bôô mais il marche)

$(document).ready(function(){

  var taille_max = 650; //max width
  var taille_min = 46; //min width
  $("#current-link").click(function() {
    $("#decouverte").animate({width: taille_min}, { queue:false, duration:400 });
    $("#crescendo").animate({width: taille_min}, { queue:false, duration:400 });
    $("#intensif").animate({width: taille_min}, { queue:false, duration:400 });
    $("#iplaynotes").animate({width: taille_min}, { queue:false, duration:400 });
	$("#current").animate({width: taille_max}, { queue:false, duration: 400});
  });
  $("#decouverte-link").click(function() {
    $("#current").animate({width: taille_min}, { queue:false, duration:400 });
    $("#crescendo").animate({width: taille_min}, { queue:false, duration:400 });
    $("#intensif").animate({width: taille_min}, { queue:false, duration:400 });
    $("#iplaynotes").animate({width: taille_min}, { queue:false, duration:400 });
	$("#decouverte").animate({width: taille_max}, { queue:false, duration: 400});
  });
  $("#crescendo-link").click(function() {
    $("#current").animate({width: taille_min}, { queue:false, duration:400 });
    $("#decouverte").animate({width: taille_min}, { queue:false, duration:400 });
    $("#intensif").animate({width: taille_min}, { queue:false, duration:400 });
    $("#iplaynotes").animate({width: taille_min}, { queue:false, duration:400 });
	$("#crescendo").animate({width: taille_max}, { queue:false, duration: 400});
  });
   $("#intensif-link").click(function() {
    $("#current").animate({width: taille_min}, { queue:false, duration:400 });
    $("#decouverte").animate({width: taille_min}, { queue:false, duration:400 });
    $("#crescendo").animate({width: taille_min}, { queue:false, duration:400 });
    $("#iplaynotes").animate({width: taille_min}, { queue:false, duration:400 });
	$("#intensif").animate({width: taille_max}, { queue:false, duration: 400});
  });
   $("#iplaynotes-link").click(function() {
    $("#current").animate({width: taille_min}, { queue:false, duration:400 });
    $("#decouverte").animate({width: taille_min}, { queue:false, duration:400 });
    $("#crescendo").animate({width: taille_min}, { queue:false, duration:400 });
    $("#intensif").animate({width: taille_min}, { queue:false, duration:400 });
	$("#iplaynotes").animate({width: taille_max}, { queue:false, duration: 400});
  });
 $("#a_decouverte").click(function() {
    $("#current").animate({width: 46}, { queue:false, duration:400 });
	$("#decouverte").animate({width: taille_max}, { queue:false, duration: 400});
  });

});

A vous de le factoriser maintenant

Edit : j'avais oublié des console.log un peu partout. Oups...
Modifié par Manhattan (04 Apr 2013 - 18:16)

ok merci bcp !