Медленно перемещаясь из положения A в положение B с анимацией

Question

У меня есть простая анимация jQuery, использующая fadein, и она работает, но однажды исчезла ... Я хочу переместить, используя свойство TOP на 30 пикселей вверх, но медленно.

Это то, что я имею до сих пор:

$('#Friends').fadeIn("slow");

У меня загружены jQuery и jQuery UI ...

Answer 1

Используйте jquery animate и задайте ему длительный срок, скажем 2000

$("#Friends").animate({ 
        top: "-=30px",
      }, duration );

- = означает, что анимация будет относительно текущей верхней позиции.

Обратите внимание, что элемент Friends должен иметь позицию, относящуюся к относительному в css:

#Friends{position:relative;}

Answer 2

Вы можете анимировать его после завершения fadeIn, используя обратный вызов, как показано ниже:

$("#Friends").fadeIn('slow',function(){
  $(this).animate({'top': '-=30px'},'slow');
});

Answer 3

Я не понимаю, почему другие ответы касаются относительных изменений координат, а не абсолютных, как OP, заданный в заголовке.

$("#Friends").animate( {top:
  "-=" + (parseInt($("#Friends").css("top")) - 100) + "px"
} );