[Résolu]Effet sur l'apparition d'un bloc

Bonjour à tous,

J'utilise du JS sur mon site afin de contrôler les saisies d'éléments et afficher dynamiquement les éléments associés.

Il y a plusieurs blocs de formulaires cachés, et chacun s'affiche (avec la propriété CSS"display") en fonction de la validation de l'élément qui le précède.

Mais je trouve que l'affichage est un peu trop brusque. En effet, quand l'élément précédent et validé, BOUM ! on se retrouve avec le bloc affiché d'un coup.

Ce que je souhaiterai, c'est que le bloc qui s'affiche sorte d'une espèce de transparence pour devenir visible. J'ai trouvé une solution simple qui serait de donner au bloc la couleur du background par défaut, puis de progressivement changer la couleur de la police et des éléments pour qu'ils prennent au bout d'un certain délai les couleurs finales d'affichage.

Par contre, je ne sais pas comment faire cela. Quelqu'un pourrait-il m'aider ?

En vous remerciant,

Killa
Modifié par Killaman (23 Mar 2011 - 11:23)

Bonjour,

C'est effectivement faisable en JS sans utiliser jQuery, mais le rendu sera supérieur si tu fais appel à jQuery.
tu devrais trouver ton bonheur dans Google avec des mots-clés tels que "jQuery apparition progressive".

Cordialement

lddsoft a écrit :
Bonjour,

C'est effectivement faisable en JS sans utiliser jQuery, mais le rendu sera supérieur si tu fais appel à jQuery.
tu devrais trouver ton bonheur dans Google avec des mots-clés tels que "jQuery apparition progressive".

Cordialement

Merci pour ton aiguillage.

J'ai effectué la recherche et j'ai trouvé un élément de réponse.

Lorsque je cherche à intégrer le FadeIn dans mon code, pourtant rien ne se produit.

Voilà mon code, avec en commentaire ce que j'utilisais avant et qui fonctionnait.

//Fonction pour afficher les blocs
function affiche(idpr)
{
	var pr = document.getElementById(idpr);

	$('pr').fadeIn('slow');
				
	//pr.style.display = "block";
}

Une petite idée de mon erreur ?

Merci
Modifié par Killaman (22 Mar 2011 - 17:41)

Ne serait-ce pas plutôt :

$('#id_de_l_element').fadeIn('slow'); 

Et puis me vient cette question basique : "Fais-tu un appel à la librairie jQuery avant d'appeler une de ses fonctions?" :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

Modifié par lddsoft (22 Mar 2011 - 20:48)

Le code utilisé est:

var pr = document.getElementById(idpr); 
$('pr').fadeIn('slow');

Il y a une erreur de syntaxe: dans la deuxième ligne, 'pr' (avec les quotes) est une chaine de caractères. Elle n'a donc strictement rien à voir avec la variable pr définie à la première ligne.

Tu peux faire ceci:

var pr = document.getElementById(idpr); 
$(pr).fadeIn('slow');

ou encore:

$(document.getElementById(idpr)).fadeIn('slow');

et enfin:

$('#'+idpr).fadeIn('slow');

Ces trois méthodes fonctionnent car la fonction $() de jQuery peut prendre comme argument une chaine de caractères (qui sera alors traitée comme un sélecteur CSS permettant d'identifier des éléments dans la page), ou bien un objet HTMLElement (ce que retourne document.getElementById).

Bonjout,

fvsch > Donc, si j'ai bien compris, ma proposition " $('#id_de_l_element').fadeIn('slow'); "

" était correcte, non?

Killaman > tu peux aussi utiliser des noms de classe au lieu des id. C'est peut-être plus adapté à ce que tu veux faire.

Bonjour messieurs,

Merci pour votre aide (je me suis servi des dires de fvsch, mais je vous remercie d'être intervenus), ça marche super bien désormais.

Je suis content, j'ai le résultat escompté.

Bien à vous,

Killa

Bonjour,
J'aimerais pouvoir revenir à la première demande faite par Killaman: comment obtenir cet effet SANS jquery? (il semblerait que jquery risque de devenir "obsolète" d'ici 1 ou 2 ans).

Merci de toute réponse

Almux