Bonjour tout le monde,
J'essaye depuis quelques jours d'écrire un bout de jquery pour animer une div cliquable, mais je bloque sur une question (sûrement très basique) de syntaxe.
J'ai créé un effet assez simple (en CSS :hover) que je voudrais déclencher au clic avec jQuery. (voir ici : https://jsfiddle.net/balleronde/fda216xm/ )
Dans cet essai, le survol déclenche deux animations simultanées : en survolant l'image, une figcaption apparait en fondu et le texte qu'elle contient est animé vers le haut, puis ces deux animations s'inversent lorsque le curseur quitte l'image.
C'est cet effet que je voudrais arriver à programmer au clic avec jQuery. Le problème, c'est que mes connaissances actuelles ne me permettent pas d'écrire le code qui exécute ces deux opérations en même temps malgré moultes... tribulations
Voici précisément ce que je voudrais arriver à faire avec jQuery :
1- Au clic, un fond blanc translucide apparaît sur l'image et la description est animée vers le haut
=> fonctionne à peu près
2- En cliquant à nouveau (n'importe où), le fond blanc translucide disparaît et le texte est animé vers le bas
=> fonctionne pour le fond blanc, mais je n'ai pas réussi à inverser l'animation du texte. Du coup, ce dernier n'est plus animé lorsqu'on rouvre la figcaption une seconde fois (puisqu'il n'est pas "redescendu" entre temps). J'ai essayé avec la condition if... else, mais visiblement je n'ai pas réussi à l'écrire correctement
3- Si la figcaption d'une image est ouverte et que l'on clique sur une autre image, la première figcaption se ferme tandis que l'autre s'ouvre (un peu comme un bouton radio, sauf qu'ici il y aura plusieurs images)
J'ai aussi essayé avec la condition if... else, sans succès.
Voilà où j'en suis de ma programmation avec jQuery :
https://jsfiddle.net/balleronde/tw9s91ez/3/
Et voici l'effet que j'ai fait en CSS :hover pour servir de modèle pour la fonction jQuery
https://jsfiddle.net/balleronde/fda216xm/
Voilà, si quelqu'un a une quelconque idée, conseil, ça me serait d'un grand secours...
Merci de votre aide et bonne journée/soirée à tous !
Modifié par balleronde (28 Jul 2016 - 01:29)
J'essaye depuis quelques jours d'écrire un bout de jquery pour animer une div cliquable, mais je bloque sur une question (sûrement très basique) de syntaxe.
J'ai créé un effet assez simple (en CSS :hover) que je voudrais déclencher au clic avec jQuery. (voir ici : https://jsfiddle.net/balleronde/fda216xm/ )
Dans cet essai, le survol déclenche deux animations simultanées : en survolant l'image, une figcaption apparait en fondu et le texte qu'elle contient est animé vers le haut, puis ces deux animations s'inversent lorsque le curseur quitte l'image.
C'est cet effet que je voudrais arriver à programmer au clic avec jQuery. Le problème, c'est que mes connaissances actuelles ne me permettent pas d'écrire le code qui exécute ces deux opérations en même temps malgré moultes... tribulations
Voici précisément ce que je voudrais arriver à faire avec jQuery :
1- Au clic, un fond blanc translucide apparaît sur l'image et la description est animée vers le haut
=> fonctionne à peu près
2- En cliquant à nouveau (n'importe où), le fond blanc translucide disparaît et le texte est animé vers le bas
=> fonctionne pour le fond blanc, mais je n'ai pas réussi à inverser l'animation du texte. Du coup, ce dernier n'est plus animé lorsqu'on rouvre la figcaption une seconde fois (puisqu'il n'est pas "redescendu" entre temps). J'ai essayé avec la condition if... else, mais visiblement je n'ai pas réussi à l'écrire correctement
3- Si la figcaption d'une image est ouverte et que l'on clique sur une autre image, la première figcaption se ferme tandis que l'autre s'ouvre (un peu comme un bouton radio, sauf qu'ici il y aura plusieurs images)
J'ai aussi essayé avec la condition if... else, sans succès.
Voilà où j'en suis de ma programmation avec jQuery :
https://jsfiddle.net/balleronde/tw9s91ez/3/
Et voici l'effet que j'ai fait en CSS :hover pour servir de modèle pour la fonction jQuery
https://jsfiddle.net/balleronde/fda216xm/
Voilà, si quelqu'un a une quelconque idée, conseil, ça me serait d'un grand secours...
Merci de votre aide et bonne journée/soirée à tous !
Modifié par balleronde (28 Jul 2016 - 01:29)
