salve a tutto, mi sto scontrando con questo problemino.

Ho creato un menu dove ogni link dovrebbe attivare una funzione animate per trasformare e spostare un elemento che funge da sfondo.

questo il menu
codice HTML:
<ul id="menu">                <li class="menu-item"><a href="#" title="home" id="link-home">home</a></li>                <li class="menu-item"><a href="#" title="galleria" id="link-galleria">galleria</a></li>                <li class="menu-item"><a href="#" title="contatti" id="link-contatti">contatti</a></li>            </ul>
e vengono chiamati questi eventi
codice:
$( "#link-home" ).click(function() {        alert('home');
        $( "#bg" ).animate({
        height: "100%",
        width: "100%",
        left: "-120%",
        top: "0"
        },{
             duration: 'slow',
             easing: 'easeOutBounce'
          }); 
    });    
        
    $( "#link-galleria" ).click(function() {
       alert('galleria');
        $( "#bg" ).animate({
        left: "0",
        height: "130%",
        width: "160%",
        left: "-30%",
        top: "-30%"
        },{
             duration: 'slow',
             easing: 'swing'
          }); 
    });  
    
     $( "#link-contatti" ).click(function() {
       alert('contatti');
        $( "#bg" ).animate({
        left: "0",
        height: "90%",
        width: "130%",
        right: "-30%",
        top: "-50%"
        },{
             duration: 'slow',
             easing: 'swing'
          }); 
    });
a dire il vero funziona però solo una volta, nel senso che una volta che clicco un link lo sfondo si trasforma correttamente ma se poi ne clicco un altro appare solo l'alert di test che ho inserito ma poi si blocca.

Qualcuno ha un'idea del perchè?