Discussion :

[boutmos]

Bonjour,

je cherche a effectuer un fadeIn/fadeOut sur #show mais sans que #logo ne soit affecté afin qu'il soit toujours visible

Code :

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

1
2
3
4
5
6
 
<div id="header">
	<div id="show">
		<div id="logo"></div>
	</div>
</div>

code Javascript/jQuery

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
 
function delayImg(nbImages) {
	setInterval(function() {
		// Tire un nombre au hasard different de celui actuel
		randomImg = Math.floor((nbImages)*Math.random())+1;
		while (currentImg == randomImg) {
			/* console.log("egalite..., nouveau tirage"); */
			randomImg = Math.floor((nbImages)*Math.random())+1;	
			/* console.log("current = "+currentImg+"\nrandom ="+randomImg); */
		}
		// fade-In fade-Out sur bandeau
		$("#show").animate({
				opacity: 0
			},250, function(){
				currentImg = randomImg;
				$(this).css({'background-image':'url(\'squelettes/images/banniere/image'+randomImg+'.jpg\')'});
				$(this).animate({opacity: 1}, "normal");
			});
		}, 5000);
}

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
 
 
#show{
	width: 938px;
	height: 120px;
	margin-left: 10px;
	background: url('../images/banniere/image1.jpg') no-repeat;
 
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
 
		border: 1px solid #BBB;
}
 
#logo{
	width: 342px;
	height: 120px;
	margin: 0 auto;
	background: url('../images/logo.png') no-repeat;
}

Ce qui est marrant c'est que pour une fois çà marche sur IE6 ...

Une fois ce problème résolu je serais intéressé pour par effectué le fadeOut ou le fadeIn , qu'une fois ou je suis sur que la nouvelle image soit chargée. Des conseils ? merci

[danielhagnoul]

Bonsoir.

IE ne connaît pas opacity ! Pour IE jQuery utilise filter.

Si vous soumettez un élément à une animation, la totalité de son contenu subit cette animation. Je ne vois pas comment l'empêcher.

[boutmos]

Salut,

IE ne connaît pas opacity ! Pour IE jQuery utilise filter.

et pourtant çà marche avec un .animate({opacity: 1}, "normal");

Sinon j'ai changé de technique :

HTML :

Code :

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

1
2
3
4
5
 
<div id="header">
	<div id="show"></div>
	<div id="logo"></div>
</div>

et le CSS :

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
 
#show{
	width: 938px;
	height: 120px;
	/* margin-left: 10px; */
	background: url('../images/banniere/image1.jpg') no-repeat;
 
		-moz-border-radius: 7px;
		-webkit-border-radius: 7px;
 
 
}
 
#logo{
	position: relative;
	top: -120px;
	width: 342px;
	height: 120px;
	margin: 0 auto;
	background: url('../images/logo.png') no-repeat;
}

Évidement, çà marche sur tous les browsers mais pas sur IE6 ... ou il me reserve la place malgrès le decalage negatif du logo.

voir ici : http://www.pierredouay.com