Переход от позиции A к позиции B медленно с анимацией

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

Это то, что у меня есть до сих пор:

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

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

Ответ 1

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

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

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

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

#Friends{position:relative;}

Ответ 2

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

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

Ответ 3

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

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