Jquery Animate（）不起作用

Question

本網站here的「特色項目」部分有動畫效果。

我試圖讓我的網站，我實際上做了一個月左右的第一次。但現在令人驚訝的是，它根本就沒有工作，只是對我來說，弄清楚問題可能是什麼。

我在選擇錯誤的庫，在我的腳本中是否有問題，或者它是一個錯誤？

HTML。

 <a class="MainMiddleTwoEach MMTE1" href="#" title="This is the title 1"> 
      <label class="MainMiddleTwoLabel1"></label> 
      <span class="MainMiddleTwoLabel2"></span>  
     </a> 

JS。

 $('.MainMiddleTwoEach').mouseenter(function (e) { 
      pageId = $(this).attr('href'); 
      $(this).children('label').animate({ top: '150px' }, 300); 
      $(this).children('label').animate({ top: '-100px' }, 300); 
      $(this).children('span').animate({ top: '20px' }, 300); 
      $(this).children('span').animate({ top: '230px' }, 300); 
     }).mouseleave(function (e) { 
      $(this).children('label').animate({ top: '130px' }, 300); 
      $(this).children('label').animate({ top: '80px' }, 300); 
      $(this).children('span').animate({ top: '-10px' }, 300); 
      $(this).children('span').animate({ top: '55px' }, 300); 
     });  

http://jsfiddle.net/K4Ak2/3

Answer 1

您需要的元素的位置設置爲relative或absolute爲了使用top，right，bottom或left性能。

退房這裏我編輯：http://jsfiddle.net/K4Ak2/4/

我在CSS

label, span { position: relative; } 

應該按預期工作添加一行。

Answer 2

從jQuery的API人稱：

方向性（上，右，下，左）對元素沒有明顯 影響，如果自己的位置樣式屬性是靜態的，它是在默認情況下它 。

您可以嘗試的位置設置爲「相對」