sito con finestre hover

[Luca Crippa]

http://www.24maggio2014.it/

Salve a tutti! Guardate questo sito che vi ho mandato: quando lo aprite le finestre colorate partono "chiuse" o a metà? All'hover del mouse si aprono, ma dovrebbero partire chiuse (al click invece si apre un'altra finestra a slide, ma su quella non ho problemi, è un altro script ). Su alcuni browser partono a metà invece che chiuse.
E' tutto fatto in javascript, lo script è il seguente:

<script type="text/javascript">  $(document).ready(function() {
        $('.box_red').hover(function(){
            var distance = $(this).outerWidth();
            $(this).find('.box_image').animate({ left : distance },{queue:false,duration:500});
        }, function(){
            $(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:500});
        });      
        
        $('.box_yell').hover(function(){
            var distance = $(this).outerWidth();
            $(this).find('.box_image2').animate({ left : '-'+distance },{queue:false,duration:500});
        }, function(){
            $(this).find('.box_image2').animate({ left : '0px' },{queue:false,duration:500});
        });   
		
		$('.box_blue').hover(function(){
            var distance = $(this).outerWidth();
            $(this).find('.box_image3').animate({ left : '-'+distance },{queue:false,duration:500});
        }, function(){
            $(this).find('.box_image3').animate({ left : '0px' },{queue:false,duration:500});
        });      
              
  });
</script>

Come posso farlo funzionare bene, secondo voi?

Grazie mille!!

[SimoX90]

Il problema è che il testo è centrato, ma non setti alcun "left" all'inizio...
Risolvi così nel css:
.box_image,.box_image1,ecc{//togli ecc e mettici tutte le classi
left:100%;
}