通过动画缓慢地从位置A移动到位置B.

我有一个使用fadein的简单jQuery动画，它可以工作，但一旦淡入…我希望使用TOP属性向上移动30像素，但慢慢地。

这是我到目前为止：

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

我有jQuery和jQuery UI加载…

Answer 1

使用jquery animate并给它一个很长的持续时间，比如2000

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

– =表示动画将相对于当前的顶部位置。

请注意， Friends元素必须在css中将position设置为relative：

 #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" } );