Inkrementowanie zmiennej globalnej wewnątrz funkcji

Wiem, że ten problem jest pewnie ultra prosty do rozwiązania i aż mi wstyd bo to podstawy, ale cały czas mi nie wychodzi, a potrzebuje tego do pewnego algorytmu. Uprościłem kod, żeby było widać o co mi chodzi. Najechanie na dany div powoduje, że div znika a zmienna i jest inkrementowana. Ale niestety i++ nie powoduje, że zmienna globalna się inkrementuje (console.log dalej pokazuje 0). Coś robię źle, ale nie potrafię dojść do tego co.

/* To do when document is ready */
$(document).ready(function(){   
    var i = 0;
    animateIntro();

    /* function which hide divs on hover */
    function animateIntro(){
        console.log(i);  
        $(".cube").hover(function(){
             var cube = this.id;
             if($("#"+cube).css("background-color") != "transparent"){
                  i++;
                  $("#"+cube).css("background-color", "transparent");
             }        
        });  
     }
});

Pytanie jest oczywiście takie - co robię źle :D?

console.log wywołujesz tylko raz, przypinając zdarzenie - nigdy więcej.

jeżeli ręcznie potem wpisujesz console.log w konsoli narzędzi deweloperskich to problem jest taki, że i nie jest globalna, jest w funkcji, którą przekazujesz do ready i tylko tam istnieje :P tylko nie zwracałoby wtedy zero, a ostrzeżenie o niezdefiniowanej zmiennej

Racja, jak wywoływałem console.loga wewnątrz hovera to wszystko było okej, poza nim już nie, dlatego, że console.log wywoływał się tylko raz. Dzięki ;)