Effet de transition entre deux images

Version imprimable

12/02/2010, 10h24
erehcab

Effet de transition entre deux images

Bonjour à tous,

Je cherche comment faire un effet de transition entre deux images au survol de la souris sur la zone. Vous pouvez voir la transition actuelle ici. Je trouve qu'elle beacoup trop rapide, j'aimerai quelque chose de plus fluide.

Si vous avez deux trois trucs à me donner je suis preneur :)

Je crois ne pas me tromper en te disant que tu ne pourras pas faire de transition en laissant tes images dans la css. CSS3 apporte bien des transitions mais n'offre pas la possibilité que tu recherches.

Sinon, voici un exemple (repris du net) de méthode pour faire une transition entre deux images.

Code:

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
 
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<title>Page type</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	 <style>
        .fade {
          position: absolute;
          top: 100px
          left: 100px
        }
 
        .fade div {
          position: absolute;
          top: 0;
          left: 0;
          display: none;
        }
    </style>
	<script>
		// when the DOM is ready:
        $(document).ready(function () {
          $('div.fade').hover(function() {
            // on hovering over, find the element we want to fade *up*
            var fade = $('> div', this);
 
            // if the element is currently being animated (to a fadeOut)...
            if (fade.is(':animated')) {
              // ...take it's current opacity back up to 1
              fade.stop().fadeTo(300, 1);
            } else {
              // fade in quickly
              fade.fadeIn(250);
            }
          }, function () {
            // on hovering out, fade the element out
            var fade = $('> div', this);
            if (fade.is(':animated')) {
              fade.stop().fadeTo(300, 0);
            } else {
              // fade away slowly
              fade.fadeOut(300);
            }
          });
        });
	</script>
 
 
</head>
<body>
 
    <div class="fade">
        <a href="/info.html"><img src="image1.jpg" width="200" height="200" /></a>
        <div>
            <a href="/info.html"><img src="image2.jpg" width="200" height="200" /></a>
        </div>
    </div>
</body>  
</html>

Bonsoir.

Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("#acheter, #form_acheter").hover(
	function(){
		var obj = $(this);
 
		obj.fadeOut(1500);
 
		obj.queue(function(){
			obj.css('background-image','url("http://www.immobilier-eden-golfe.com/template/img/illustration_acheter_hover.png")').fadeIn(1500);
			obj.dequeue();
		});
	},
	function (){
		var obj = $(this);
 
		obj.fadeOut(1500);
 
		obj.queue(function(){
			obj.css('background-image','url("http://www.immobilier-eden-golfe.com/template/img/illustration_acheter.png")').fadeIn(1500);
			obj.dequeue();
		});
	}
);

16/02/2010, 15h54
pop_up

Beaucoup plus élégant comme solution.

Merci danielhagnoul :ccool:

Par contre, le fait d'utiliser queue() impose que l'on passe aucune image en fond. Est il possible de lancer les deux effets simultanément pour qu'on ne passe pas par l'absence de ce fond ?

merci
16/02/2010, 22h48
danielhagnoul
Bonsoir.

Vous parlez de l'infime fraction de seconde où il n'y a pas d'image, car la précédente est fadeOut() et la suivante arrive en fadeIn() ?

Je ne sais pas si cela répondra à votre demande, mais on peut modifier le « fading » pour garder l'image précédente très atténuée, exemple :
Code:

1 2 3 /* remplacer : obj.fadeOut(1500); */ obj.fadeTo(1500, 0.15);
J'ai mis une opacité de 0.15, mais il faut sûrement l'ajuster, car je n'ai pas testé.
17/02/2010, 09h02
pop_up

Merci pour ta réponse,

J'ai essayé ce que tu m'as proposé mais l'opacité reste à 0.15 et le nouveau fond se trouve opacifié.

Ce que je cherchais à savoir c'est comment lancer de lancer les deux actions en même temps (comme dans l'exemple que j'avais mis avec deux images source dans le html) mais vu la technique utilisée ici, on ne pourra pas lancer le fadeout de l'objet avec le fond 1 et en même temps lancer un fadein sur le même objet avec un fond 2.

merci quand même.