Faire un Fadeout sur un block sans qu'une div child ne soit affectée
Bonjour,
je cherche a effectuer un fadeIn/fadeOut sur #show mais sans que #logo ne soit affecté afin qu'il soit toujours visible
Code:
1
2
3
4
5
6
|
<div id="header">
<div id="show">
<div id="logo"></div>
</div>
</div> |
code Javascript/jQuery
Code:
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:
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
