jquery Animer div pour se déplacer jusqu'à ce un div enfant est à une certaine position

Question

HTML:

<header> 
     <div id="title_container"><h1 id="title">EXAMPLE<h1></div> 
     <div id="slogan_container"><p id="slogan">EXAMPLE</p></div> 
     <br/><br/> 
     <nav id="menu_container"> 
      <ul id="menu"> 
       <li>nav1</li> 
       <li>nav2</li> 
       <li>nav3</li> 
       <li>nav4</li> 
       <li>nav5</li> 
      </ul> 
     </nav> 
    </header> 

CSS:

header { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    position: relative; 
    top: 20%; 
    width: 100%; 
    z-index: 10; 
    overflow: auto; 
} 

JQUERY:

$('li').click(function(){ 
    $('header').animate({???}, 5000, function(){ 
     window.location.href = link; 
    }); 
}); 

Alors voici mon problème: Je voudrais que mon "en-tête" entier monte jusqu'à ce que le "nav" soit de 5% du haut. Quelqu'un a une idée?

Ici im en utilisant - = 60% pour illustrer ce que je veux arriver, mais ce que je veux est l'animation d'arrêter lorsque la « nav » atteint 5% du haut: http://jsfiddle.net/6xPMW/

Answer 1

EDIT

Je suppose que ce n'est pas la solution parfaite, mais il fonctionne: http://jsfiddle.net/6xPMW/3/

---

• Votre br s regardent mal, ils devraient avoir la barre de clôture à la fin, comme ceci: <br />
• <li> s ne devraient pas avoir un attribut href plutôt mis <a> balises l'intérieur ou à utiliser l'attribut rel par exemple: <li rel="#">
• Je ne comprends pas très bien ce qui va arriver. Votre en-tête sera animé jusqu'à quelle condition? En outre, quel est le point de faire l'animation lorsque vous changez la window.location de toute façon? Peut-être que vous pourrait fournir un exemple jsfiddle, s'il vous plaît.