Chiusura non corretta sezioni javascript

[-Lebowski-]

Questo script funziona benissimo, ma solo per una delle sezioni che sto facendo, ovvero una coppia di div..

<script type="text/javascript" charset="utf-8">        $(document).ready(function(){
            $("#demo1").hoverIntent({
                over: makeTall,
                
                selector: '.p1'
            });
            $("#demo2").hoverIntent({
                over: makeTall,
                out: makeShort,
                selector: '.p2'
            });
        }); // close document.ready


function makeTall(){ $('.p1').animate({"width":100},100); 
                     $('.p2').animate({"width":300},100);}
        
function makeShort(){$('.p1').animate({"width":100},100); 
                     $('.p2').animate({"width":0},100);}


</script>

Ma io di sezioni ne devo fare tipo 7-8, cioè 7-8 coppie di div, e per cominciare avevo provato ad aggiungere un'altra coppia, ma è come se si inglobasse a quella precedente, come se non l'abbia diciamo chiusa bene......

<script type="text/javascript" charset="utf-8">
        $(document).ready(function(){
            $("#demo1").hoverIntent({
                over: makeTall,
                
                selector: '.p1'
            });
            $("#demo2").hoverIntent({
                over: makeTall,
                out: makeShort,
                selector: '.p2'
            });
            $("#demo3").hoverIntent({
                over: makeTall,
                
                selector: '.p3'
            });
            $("#demo4").hoverIntent({
                over: makeTall,
                out: makeShort,
                selector: '.p4'
            });
        }); // close document.ready


function makeTall(){ $('.p1').animate({"width":100},100); 
                     $('.p2').animate({"width":300},100);}
        
function makeShort(){$('.p1').animate({"width":100},100); 
                     $('.p2').animate({"width":0},100);}


function makeTall(){ $('.p3').animate({"width":100},100); 
                     $('.p4').animate({"width":300},100);}
        
function makeShort(){$('.p3').animate({"width":100},100); 
                     $('.p4').animate({"width":0},100);}


</script>

Vi prego io non sono esperto, so che sicuramente avrò commesso degli errori assurdi su cose molto basilari..... ho provato in tanti modi ma succede che continua a funzionare, ma la prima coppia è come se venisse bypassata...