通过动画缓慢地从位置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

我不明白为什么其他答案是关于相对坐标变化，而不是像标题中询问的那样绝对坐标。

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