Alterner une image et un texte avec une transition CSS3

**6nawak** · 26/04/2015, 16h51

Bonjour à tous,

Je débute en javascript.

Sauriez-vous m'aider pour le problème suivant :

Je cherche le code javascript le plus léger possible afin d'effectuer la chose suivante :

Sur une page HTML5, j'ai une image, lorsque je clique sur celle-ci elle disparait (avec une transition CSS3) et laisse apparaître un texte à sa place.
Puis lorsque je clique sur le texte, de nouveau celui-ci disparait et laisse apparaître l'image précédente (toujours avec une transition CSS3).

Je vous remercie par avance pour votre aide,

**ABCIWEB** · 26/04/2015, 21h27

Salut,

C'est un impératif la transition css3 ? Je vois pas trop comment faire avec un comportement onclick. Cela dit je suis pas un as des css donc tu auras peut être une meilleure réponse.
En attendant comme j'ai pas plusieurs vies, j'utilise jquery et on peut le faire très simplement en une seule ligne de code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title></title>
<script src="//code.jquery.com/jquery-1.11.2.js"></script>
<script>
$(function(){                 
	$(".content").on('click',function(){$(".change").fadeToggle( "slow", "linear" );});
});
</script>
<style type="text/css">
.content {   
  position:relative;
}
.content, .change {   
  height:90px;
  width:216px;
}
.change { 
  position:absolute;
  top:0;
  left:0;
  background:#ccc; 
}
</style>
</head>
<body>
<div class="content">
    <div class="change" style="display:none">Le texte qui s'affiche onclick sur l'image puis disparaît ensuite </div>
    <img class="change"  src="http://www.developpez.net/template/images/logo.png" alt="développez">
</div>
</body>
</html>

L'avantage en plus d'être rapide c'est que c'est également compatible avec des navigateurs anciens

**6nawak** · 30/04/2015, 23h39

Bonjour,

J'essai de créer un script qui effectue ceci :

- Si je clique sur l'image, alors elle disparait avec un effet de floutage, puis un texte apparaît à la place.

- Si je clique sur le texte, alors il disparait avec un effet de floutage, puis l'image reapparaît à sa place.

- et ainsi de suite... à chaque clique on alterne entre l'image et le texte.

Cependant si vous regardez le jsFiddle dont voici le lien :

http://jsfiddle.net/n3gky0y3/1/

vous verrez qu'au troisième clique le texte ET le dessin disparaissent...

Pouvez-vous m'expliquer d'où vient mon erreur ?

Si vous voyez des optimisations à apporter à mon code n'hésitez pas.

Je vous remercie par avance pour votre aide.

**SylvainPV** · 01/05/2015, 01h31

Il y a la fonction fadeToggle pour ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var elements = $('img, p'); // selectionne image et texte
elements.click($.fn.fadeToggle.bind(elements));

http://jsfiddle.net/n3gky0y3/3/

Si tu tiens à garder l'effet de flou (compatible Webkit uniquement), une transition CSS au lieu de deux anims est plus simple :
http://jsfiddle.net/n3gky0y3/4/

**6nawak** · 01/05/2015, 12h08

Merci SylvainPV,

Non seulement ton code fonctionne très bien mais il est, de plus, optimisé à l'extrême.

Encore merci.

**6nawak** · 01/05/2015, 14h06

J'ai encore une dernière question.

Si je me trouve dans une situation comme celle-ci :

http://jsfiddle.net/n3gky0y3/6/

où j'ai plusieurs images.

Quelle serait la manière la plus optimisée pour effectuer au clic que l'animation de l'élément concerné, sans les enclenchés toutes.

Par exemple si je clique sur la première image il n'y a que la première description qui apparait, sans que la seconde s'enclenche.

Car j'aurai beaucoup d'images, je ne suis pas sûr que de désigner chaque image et description par un id et répéter ainsi le même code pour chaque id soit la manière la plus optimisée de faire.

Encore merci pour votre aide.

**SylvainPV** · 01/05/2015, 14h45

Ma première idée serait de mettre chacun des groupes dans un élément différent, puis d'aller modifier les classes des enfants de l'élément cliqué :
http://jsfiddle.net/n3gky0y3/7/

**ABCIWEB** · 03/05/2015, 03h28

Envoyé par 6nawak

Merci SylvainPV,
Non seulement ton code fonctionne très bien mais il est, de plus, optimisé à l'extrême.

La transition CSS3 est discutable. A partir du moment où tu charge jquery autant faire du code un maximum compatible, alors pourquoi utiliser une transition css3 qui sera incompatible avec des navigateurs encore assez utilisés comme IE9. Le seul avantage de cette solution est que tu vas éventuellement fluidifier la transition pour les smartphones d'entrée de gamme. Mais avec un fadeToogle tu étais compatible avec tous les navigateurs, même anciens...

**SylvainPV** · 04/05/2015, 14h48

Les transitions CSS3 c'est 90% de support aujourd'hui en part globale de marché. Et c'est juste de l'animation, donc ce n'est pas grave si le navigateur ne les supporte pas. Aussi, elles sont plus fluides sur mobile et moins consommatrices en CPU que leur équivalent fadeToggle à base de timeout.

Alterner une image et un texte avec une transition CSS3

jQuery

Vue hybride

Discussions similaires

Partager

Partager