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 для Animate:

Направленные свойства (сверху, справа, снизу, слева) не имеют заметного влияния на элементы, если их свойство позиции стиль статична, который оно по умолчанию ,

Вы можете попробовать установить позицию «относительно»