I have an array with a different image names. The idea is to fade an image out then change the image name and finally change the image back in, so it looks like every time the image fades a different image shows up.However every time I do a name change rather than outputting a value from the array it outputs the word "undefined"... When I loop through the array and colsole.log the values, everything works ok, but if I try to do the code below, the "undefined" value shows instead of the array value. 

Here is my code.

```
<div id="wrap">
        <div id="face">
            <img src="face.png">

        </div>
        <div id="bar">
            <div id="left">
                <img id="leftPic" src="cherry.png"/>

            </div>

            <div id="center">
                <img id="centerPic" src="seven.png"/>
            </div>

            <div id="right">
                <img id="rightPic" src="bar.png"/>
            </div>

            </div>

            <div style="clear:both;"></div>

            <button id="spinIt">Spin</button>

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

    <script type="text/javascript">

        $("#spinIt").click(function(){

            var fruits = ["banana","bar","cherry", "grape", "lemon", "melon", "orange", "seven", "winner"];

            for (idx = 0; idx < fruits.length; idx++) { 
                $("#leftPic").fadeOut().fadeIn("slow",function(){
                    $("#leftPic").attr("src",fruits[idx]+".png");
                });
            }

        });
    </script>

```