jQuery的動畫div來移動，直到孩子的div是在某個位置

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; 
    }); 
}); 

所以，我的繼承人問題： 我希望我的整個「標題」向上移動，直到「導航」距離頂部5％。 任何人有想法？

這裏IM使用 - = 60％，說明什麼，我希望發生的，但我想是動畫停止時，「導航」達到5％，從頂部： http://jsfiddle.net/6xPMW/

Answer 1

編輯

我想這是不完美的解決方案，但它的工作原理：http://jsfiddle.net/6xPMW/3/

---

• 你br看看錯了，他們應該有結束斜槓末， 像這樣：<br />
• <li>不是應該有一個href屬性，而把<a>標籤 內部或使用rel屬性，例如：<li rel="#">
• 我不太明白會發生什麼。你的標題應該是 動畫，直到什麼條件？另外，當你改變window.location的時候，做動畫 又有什麼意義呢？也許你 可以提供一個jsfiddle的例子，請。