从底部到顶部移位后垂直居中

时间:2015-10-25 15:23:17

标签: jquery animation

我希望在从底部到顶部的位移10%后垂直居中.presentation div。

我的代码在#home-header达到100%的高度时有效,但当我将其更改为75%时,该代码无效......

如何解决它?

http://jsfiddle.net/Xroad/4t9vsym3/16/

var placement = ($('#home-header').outerHeight()-$('.presentation').outerHeight())/2;

$('.presentation').animate({bottom: placement, opacity: 1}, 1700);

#home-header {
    height: 75%;
    width: 100%;
    background: red;
}
.presentation {
    position: absolute;
    max-width: 1100px;
    margin: auto;
    top: 50%;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0;
    text-align: center;
    z-index: 1;
}

2 个答案:

答案 0 :(得分:0)

如果主页标题的高度不是100%,则需要调整演示文稿的顶部/底部位置。

http://jsfiddle.net/4t9vsym3/17/

#home-header {
    height: 75%;
    width: 100%;
    background: red;
}
.presentation {
    position: absolute;
    max-width: 1100px;
    margin: auto;
    top: 30%;
    bottom: 30%;
    left: 0;
    right: 0;
    opacity: 0;
    text-align: center;
    z-index: 1;
}

答案 1 :(得分:0)

尝试var placement = (window.innerHeight - $(".presentation").height()) / 2;

jsfiddle http://jsfiddle.net/4t9vsym3/18/