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

它应该按预期工作。