Fonctions chainables
Slt,
à propos des fonctions JQuery chainables, vous avez mis un exemple sur la page "débuter avec JQuery" d'un enchainement de la fonction .html et de la .CSS. Et j'aimerais pouvoir enchainer les fonctions me permettant d'avoir les effets Slide In/Out + Fade In/Out. Mais cela ne donne rien! Pouvez-vous m'aider, svp? Merci.
Slt,
en fait je cherche à faire apparaitre une zone de texte cachée initialement (comme dans votre exemple), avec un glissement (slideDown) et en même temps un fondu (fadeIn).
Et j'ai une question supplémentaire, j'en profite, est-ce que je peux appliquer ces même effets pour faire apparaitre une image au lieu d'un texte,
Merci de ton aide. (ps: je suis novice en javascript!)
Voilà donc mon code :
Ma première page HTML - jQuery
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").slideDown();
return false;
});
$("a.hide").click(function(){
$("#text-hidden").slideUp();
return false;
});
});
Afficher infos
Fermer
Rider des années 70
Fermer
$(document).ready(function(){
$("a.show").click(function(){
$("#text-hidden").css({opacity:"0"}).animate( { height:"show", opacity:"1" }, 1500 );
return false;
});
$("a.hide").click(function(){
$("#text-hidden").animate( { height:"hide", opacity:"0" }, 1500 );
return false;
});
});
Explications :
Pour le bouton show, j'initialise l'opacité à 0 (élément invisible) avec la fonction css ensuite j'utilise la fonction animate pour lui dire que la hauteur doit être visible (équivaut à slidedown) et que l'opacité doit augmenter jusqu'à 1 (équivaut à fadeIn).Et inversement pour le bouton hide.
Les effets jQuery fonctionnent de la même manière pour les images.
Si tu as des questions, n'hésites pas
Salut,
Merci beaucoup les effets parallèles, c'est ce que je voulais faire...
Je sais j'abuse mais ça (code) donnerait quoi appliqués à une image et non sur "a"?
Merci pour ton aide!
Alex.
<img id="image" class="show" src="images/img.gif" width="200" height="200" /> <img class="hide" src="images/img.gif" width="200" height="200" />
Si tu veux que l'effet s'applique sur l'image
$(document).ready(function(){
$("a.show").click(function(){
$("#image").css({opacity:"0"}).animate( { height:"show", opacity:"1" }, 1500 );
return false;
});
$("a.hide").click(function(){
$("#image").animate( { height:"hide", opacity:"0" }, 1500 );
return false;
});
});
Si tu veux que l'image déclenche l'effet
$(document).ready(function(){
$("img.show").click(function(){
$("#text-hidden").css({opacity:"0"}).animate( { height:"show", opacity:"1" }, 1500 );
return false;
});
$("img.hide").click(function(){
$("#text-hidden").animate( { height:"hide", opacity:"0" }, 1500 );
return false;
});
});
Salut, merci pour ton aide, je n'ai pas encore testé avec les images. Je prend du recul en ce moment...
Je suis, en fait, en train de faire la refonte de l'ancien site de mon asso (web 1.0, en flash) et je veux intégré l'AJAX dans mes pages (pour passer au web 2.0). J'ai demandé des conseils sur un forum (http://www.commentcamarche.net/forum/affich-14383142-ajax), et j'ai suivi un tuto vidéo (http://www.grafikart.fr/tutoriels/video/navigation-ajax-33) mais ça ne fonctionne pas malgré les conseils des internautes. En fait, je suis novice et j'ai de l'ambition, je sais pas si ça va ensemble!!! Aurais-tu des conseils de pédagogue à me prodiguer???
Merci.
novice et ambitieux ça va bien ensemble mais il faut être patient car ça prend toujours un peu de temps pour apprendre une nouvelle techno. J'ai pas vraiment de conseils à te donner, il faut que tu restes motivé et surtout ne pas abandonner avoir d'avoir finaliser ton objectif. Pour tes questions sur ajax, tu peux créer une nouvelle discussion sur ce sujet et j'essaierai de t'aider un maximum.
$("#test").slideUp().slideDown().fadeOut().fadeIn();Sinon petit rappel au niveau des effects jQuery (j'essaierais de compléter la documentation dès que j'ai un peu de temps$("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 );Pour enchainer les effets les uns à la suite des autres :$("#block2").animate( { width:"90%"}, 1000 ) .animate( { fontSize:"24px" } , 1000 ) .animate( { borderLeftWidth:"15px" }, 1000);Pour exécuter les effets en parallèle, il faut positionner le paramètre queue à false :$("#block1").animate( { width:"90%" }, { queue:false, duration:3000 } ) .animate( { fontSize:"24px" }, 1500 ) .animate( { borderRightWidth:"15px" }, 1500);@+ Yohann (yoja team)