Function reloading multiple times

Function reloading multiple times

I don't know why these functions are being refired.The variable counter is 4
But when I make a skeleton of it, it only fires once? What's the difference in the layout below to this one I just made http://jsfiddle.net/5tMEF/1/ vs http://jsfiddle.net/5tMEF/9/

*edited*
  1. $(document).ready(function(){    $(document).ready(function(){
            var control = 0;
            $("#logo").click(function(){
                   
                    $(this).fadeOut();
                    $("#intro").animate({width:"10%", left:"40%"}, function() {
                       
                        $(".nav2").fadeIn(function() {
                           
                            $("#home").animate({left:"0%", top:"5%", width:"5%", height:"3%"});
                            $("#directory").animate({left:"0%", top:"10%", width:"5%", height:"3%"});
                            $("#about").animate({left:"0%", top:"15%", width:"5%", height:"3%"});
                            $("#contact").animate({left:"0%", top:"20%", width:"5%", height:"3%"});
                                   
                                control++;
                                alert(control);
                                   
                            });
                         });
                      });
                   });