从顶部到页面中心动画div

Question

我想要一个div从页面顶部到页面中心进行动画制作。我使用了绝对定位并制作了顶部：$(window).height/2。我也尝试了最高：50％。

但它显示不同的屏幕不同的结果。你能提出任何稳定的解决方案吗这里是我的代码：

 $('#targets').fadeIn('fast').animate({ 
      'top': ($(window).height()/2) - 20 
      }, {duration: 'slow', queue: false}, function() { 
      // Animation complete. 
     }); 

Answer 1

$(function() { 
    var tar = $('#targets'); 
    tar.fadeIn().animate({top: $(window).height()/2 - tar.outerHeight()/2}, {duration: 'slow', queue: false}, function() { 
     //Animation complete. 
    }); 
}); 

这应该是一声就你以后。这里有一个工作小提琴：http://jsfiddle.net/7R2wK/

Answer 2

这是否适合你？

http://jsfiddle.net/xYZTZ/3/

关键就在于，基于在DIV的尺寸使用切缘阴性。

Answer 3

$('#targets').fadeIn('fast').animate({ 
      'top': "50%", 'margin-top': +($('#targets').height()/-2) 
      }, {duration: 'slow', queue: false}, function() { 
      // Animation complete. 
     }); 

你需要设置的div半人高的是负面的margin-top你动画