image fade in/out

[barbs75]

Hey guys,

 

Just wandering if any of you guys know where i would be able to find a good script to allow me to fade in/out through a series of images?

 

cheers

 

Craig

[F1Fan]

I created one recently that fades whole divs. It's a little bulky (the PHP part anyway), but it works flawlessly and it's extremely smooth. In this form, it takes 1 second to fade out and one more to fade back in.

 

Here goes:

 

<style type='text/css'>

<?php for ($i=0;$i<=100;$i++){ ?>

div.fade<?=$i?>{

z-index:1;

width: 90%;

height: 90%;

background: #D4D0C8;

vertical-align: middle;

filter: alpha(opacity=<?=$i?>);

-moz-opacity: <?=($i/100)?>;

opacity: <?=($i/100)?>;

}

<?php } ?>

</style>

<script type="text/javascript">

var fade = 0;

function fadeOut(){

if (fade>0){

fade--;

setFade();

setTimeout("fadeOut()",1);

}

else{

changeImage(); //You'll have to write this one, but should be easy

fadeIn();

}

}

function fadeIn(){

if (fade<100){

fade++;

setFade();

setTimeout("fadeIn()",1);

}

else{

fade = 100;

setFade();

enableButtons();

}

}

function setFade(){

var clssnm = "fade"+fade;

if (document.getElementById('fadediv')){

document.getElementById('fadediv').className = clssnm;

}

}

</script>

<div id="fadediv" class="fade0">Blah</div>

 

 

If you increase the setTimeout number, it will increase the fade in/out time. If you increment the fade variable more than one, it will be quicker, but not as smooth.