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人称：

方向性（上，右，下，左）对元素没有明显 影响，如果自己的位置样式属性是静态的，它是在默认情况下它 。

您可以尝试的位置设置为“相对”