> 
> **Possible Duplicate:**  
> 
> [How do JavaScript closures work?](https://stackoverflow.com/questions/111102/how-do-javascript-closures-work) 
> 
> 
> 

I've searched the FAQ and I've seen examples but I can't seem to grasp why this isn't working. I'd really appreciate any hints at all as to what I'm doing wrong.
All I'm trying to do is take a word and on button click display images one at a time for each letter, spelling out the word (and images should fade in/out). 
It's the classic "for loop only shows last item" problem but the thing is, the console logs correctly. The variable changes, but only the last image displays. Again I truly appreciate any help understanding what I'm doing wrong as I know it's important to fully grasp this. Code below (I left out the HTML as it's just a div that gets updated and a button):

```
$(document).ready(function () {
  var word = 'abc';

  $('#newWordButton').click(function () {
    function animateLetters() {
      function changeLetter() {
        for (i = 0; i < word.length; i++) {
          var currentLetter = word.charAt(i);
          console.log(currentLetter);
          $('#wordsDiv').fadeOut(1000, function () {
            $('#wordsDiv').replaceWith('<img src = "images/letters/' + currentLetter + '.gif" />');
            $('#wordsDiv').fadeIn(1000);
          });
        }
      }
      setTimeout(changeLetter, 1000);
    }

    animateLetters();
  });
});

```