Jquery Animate() not working

Question

There is an animating effect in the " Featured Projects " part of this site here .

I'm trying to make that for my site and I actually did that at first about a month ago. But now surprisingly it is not working at all and just kind of ambiguous for me to figure that out what the issue could be.

Am I choosing the wrong library, is there a problem in my scripts, or is it a bug?

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

You need to set the element's position to relative or absolute in order to use the top, right, bottom or left properties.

Check out my edit here: http://jsfiddle.net/K4Ak2/4/

I've added one line in the CSS

label, span { position: relative; }

It should work as expected.

Answer 2

From the jQuery api for Animate: http://api.jquery.com/animate/

Directional properties (top, right, bottom, left) have no discernible effect on elements if their position style property is static, which it is by default.

You may try setting the position to 'relative'