Why won't my HTML Images fade

I'm trying to create a simple slideshow effect. I have 10 images, and I've created a basic HTML page with 2 buttons to go to the right or left image. On clicking the button, the images change.

Now, I'm trying to add a basic fade functionality to the changing image. But the fade effect isn't getting displayed. When I put alerts, I notice that the fade is taking place, but without the alerts it is too fast to be visible. Also, it is happening on the previous image, instead of the next one.

    <html>
<head>
    <style>
        .main {
            text-align: center;
        }
        .centered {
            display: inline-block;
        }
        #image {
            border: solid 2px;
            width: 500px;
            height: 500px;
        }
        #number {
            font-size: 30px;
        }
    </style>
    <script>
        function goLeft() {
            var image = document.getElementById("image");
            var pos = document.getElementById("number");
            if(Number(pos.innerHTML)==1) {
                image.src = "Images\\10.jpg"
                pos.innerHTML = 10;
            } else {
                image.src = "Images\\" + (Number(pos.innerHTML)-1).toString() + ".jpg"
                pos.innerHTML = (Number(pos.innerHTML)-1).toString();
            }
            for (var i=0; i<25; i++) {
                setTimeout(changeOpacity(image, i), 1000);
            }
        }

        function changeOpacity(image, i) {
            alert(parseFloat(i*4/100).toString());
            image.style.opacity = (parseFloat(i*4/100).toString()).toString();
        }

        function goRight() {
            var image = document.getElementById("image");
            var pos = document.getElementById("number");
            if(Number(pos.innerHTML)==10) {
                image.src = "Images\\1.jpg"
                pos.innerHTML = 1;
            } else {
                image.src = "Images\\" + (Number(pos.innerHTML)+1).toString() + ".jpg"
                pos.innerHTML = (Number(pos.innerHTML)+1).toString();
            }
            for (var i=0; i<25; i++) {
                setTimeout(changeOpacity(image, i), 1000);
            }
        }
    </script>
</head>
<body>
    <div class="main">
        <div class="centered">
            <img id="image" src="Images\1.jpg">
        </div>
    </div>
    <div class="main">
        <div class="centered">
            <span id="number">1</span>
        </div>
    </div>
    <div class="main">
        <div class="centered">
            <button onclick="goLeft()" style="margin-right:50px;">Go Left</button>
            <button onclick="goRight()" style="margin-left:50px;">Go Right</button>
        </div>
    </div>
</body>

Solution

The problem is this block of code that is in your goLeft method, and goRight method:

for (var i=0; i<25; i++) {
    setTimeout(changeOpacity(image, i), 1000);
}

You are creating 25 timers that, and each timer will execute approximately 1 second later.

Creating animations is best left to the CSS.

In your CSS add:

#image {
    transition: opacity 0.5s ease;
}

And then in your JavaScript, simply: image.style.opacity = 1.0;

When the opacity changes, CSS will automatically transition the opacity length at the speed defined in the css, e.g 0.5s. Feel free to experiment.

I also added a jsfiddle here: http://jsfiddle.net/dya7L8wq/