[javasript,jquery]dissolvenza d'immagini in entrata!

[seattle_82]

Salve sono nuovo del forum...detto questo volevo sapere se qualcuno poteva aiutarmi nell'inserire una dissolvenza in entrata delle immagini di questo script..credo che il comando sia .fadeIn() ma nn so dove iserirlo:

<script language="JavaScript" type="text/javascript">
    if (document.images){ 
        img1on = new Image(); 
        img1on.src = "img/sitiWeb.png";
        img2on = new Image(); 
        img2on.src = "img/locandine.png"; 
        img3on = new Image();
        img3on.src = "img/fotoritocco.png";
        img4on = new Image();
        img4on.src = "img/loghi.png";
    }

    function imgOn(imgName) {
        if (document.images) {

            document[imgName].src = eval(imgName + "on.src");
        }
    }
    function start() {
        setInterval ("imgOn('img1')" ,1000);
        setInterval ("imgOn('img3')" ,1500);
        setInterval ("imgOn('img2')" ,2000);
        setInterval ("imgOn('img4')" ,2500);
    }
</script>

Le immagini entrano una alla volta come volevo ma vorrei che entrassero piu lentamente...Grazie in anticipo per chi risponderà!!

 

[criric]

Ciao, fadeIn() è un metodo di jquery quindi dovrai includere la libreria
prova questo esempio

<style>
    #immagini img {
        width: 220px;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function(){
        var immagini = ["01.jpg","02.jpg","03.jpg","04.jpg"];
        var tempo = 5000; // tempo per il cambio immagine
        var i = 1; // incrementatore
        var dir = "../img/"; // percorso della cartella immagini
        setInterval(function(){
            $("#immagini img").fadeOut(1200,function(){
                $("#immagini img").attr("src",dir + immagini[i]).fadeIn(1200);
            });            
            i++;
            if(i == immagini.length) i = 0;
        },tempo);
    }
</script>
<div id="immagini">    
    <img src="../img/01.jpg" alt="img"/>
</div>