[RESOLU][Jqueryr] Effet à chaque rajout dans un bloc

Bonjour,
Je vous sollicite car je cherche à faire un effet de slideDown à chaque fois que je rajoute du texte dans un bloc div.
Faire en sorte que le div s'agrandisse avec un effet, et pas que le texte arrive d'un coup.


Mon code se décompose comme ça.

<div id="message" style="display:none;"></div>

Ensuite mon code jquery:

function(data){
$("#message").append(data);
$("#message:p").slideDown('slow');
					});

La function est la callback d'un $.POST().

Donc au départ, la div message est non affiché, arrivé du premier message, elle s'affiche avec l'effet slideDown, arrivé du 2ème le message s'affiche sans effet, arrivé classique.
Ce qui est normale, puisqu'à l'arriver du deuxième, le div message n'est plus masqué.

Si quelqu'un à une méthode pour détourner ça.
Merci d'avance!
Modifié par WyLLoU (22 Feb 2010 - 14:57)

Salut,

Il suffit de le cacher avant de de faire slideDown() :

function (data){
	$data = $(data).hide();
	$("#message").append($data);
	$data.slideDown("slow");
}

jo_link_noir a écrit :
Salut,

Il suffit de le cacher avant de de faire slideDown() :

function (data){
	$data = $(data).hide();
	$("#message").append($data);
	$data.slideDown("slow");
}

Hello,
Bin j'ai fais ça plutôt

$data = $("#message").hide(); 
$("#message").append(data);
$("#message:p").slideDown('slow');

Mais ça me cache tout le bloc. C'est pas l'effet rechercher.
Sachant que le data contient des balise <p></p>Est-ce que dire que je veux que le dernier paragraphe du bloc message s'affiche en slideDown pourrait fonctionner?

Je vais regarder ça.
Merci.
Modifié par WyLLoU (19 Feb 2010 - 14:55)

Ah c'est spécial comme demande. Si tu veux que ça fonctionne par paragraphe, en effet, tu peux ne séléctionner que le dernier et le faire s'afficher avec un slideDown -> http://jquery.jarodxxx.com/manuel/Les-selecteurs/selecteur/

#message:lastChild pourrait correspondre à ton besoin, pour peu que les paragraphes soient des enfants directs de #message .

Sinon, il me semble que dans ton html, tu as mis le style display:none . Certes ça fonctionne, mais si le visiteur n'a pas activé Javascript, il ne pourra pas voir le contenu. L'idéal serait de cacher la div via JS au chargement de la page, comme ça si l'utilisateur n'a pas JS, il la verra normalement.

HammHetfield a écrit :

Sinon, il me semble que dans ton html, tu as mis le style display:none . Certes ça fonctionne, mais si le visiteur n'a pas activé Javascript, il ne pourra pas voir le contenu. L'idéal serait de cacher la div via JS au chargement de la page, comme ça si l'utilisateur n'a pas JS, il la verra normalement.

Hello HammHetfield.
Ok pour le display. Mais les messages reviennent via jquery, donc si l'utilisateur n'a pas JS, que dois je faire pour que ça fonctionne quand même?

Bon, du nouveau.
Je me suis gratté un peu la tête.
Et je suis arrivé à ça.

$("#message").append(data);
$("#message").slideDown('slow',function(){$("p:hidden").slideDown('slow');});

En mettant un display sur les balises <p> renvoyé par ajax.

Ca rend un peu ce que je cherchais, mais je comprend pas pourquoi le bloc s'allonge un maximum pour se réduire ensuite en fonction du texte.

Si vous avez d'autres idée.
Modifié par WyLLoU (19 Feb 2010 - 14:56)

wanabe modo : y'a un bouton éditer, c'est plus pratique que de faire des doubles posts, surtout à 20 minutes de différence, mais je le précise uniquement si tu le savais pas, jveux pas me faire taper >.<

Sinon, si tes messages reviennent via JS, je suppose que de l'ajax. L'idéal serait d'avoir la possibilité de voir la page en ligne, parce que c'est un peu compliqué de comprendre là comme ça ce que c'est sensé donner.

Dans tous les cas, JS doit toujours être accessoire, donc si tu n'as pas l'habitude de prévoir un fonctionnement JS et sans en même temps, le mieux est de commencer par conder ton site ou ta page sans JS, de façon à ce que tout soit naviguable, et ensuite d'y ajouter le dynamisme sur la base de "sans JS"... De cette façon tu es sûr que ce que tu fais en JS peut être vu sans.

Encore une fois, pour des problèmes spécifiques comme ça, c'est pas évident de comprendre le comportement adapté sans le tester soi même.

HammHetfield a écrit :
Sinon, il me semble que dans ton html, tu as mis le style display:none.

J'ai oublier de le préciser, mais pour que mon code fonctionne il faut l'enlever '^^.

jo_link_noir a écrit :

J'ai oublier de le préciser, mais pour que mon code fonctionne il faut l'enlever '^^.

Bien vue, c'est carrément ce que je voulais faire.
J'aurais dû y penser à enlever le display.
Je savais pas qu'on pouvait mettre de l'effet sur le data.
Merci Beaucoup Jo.

HammHetfield merci pour tes conseils. Je vais en tenir compte.
Désolé pour le double post.

Merci à vous, à bientôt.