通过动画缓慢地从位置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中将位置设置为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"
} );