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

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

你需要设置一个负余量 - 顶部是你动画的div高度的一半

Answer 3

这对你有用吗？

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

技巧是根据DIV的尺寸使用的负边距。

将div从顶部到页面中心设置动画

3 个答案: