Question

我有一个简单的网页，由水平和垂直居中的图像组成，因此它显示在可见页面的绝对中心。我试图使用jQuery animate将此图像迁移到页面顶部。

我使用两个div和一些css将图像居中。

HTML ...

<div id="outer">
    <div id="inner"><img src="images/png/logo.png" id="logo-index" width="84px" height="100px"/></div>
</div>

...的CSS

#outer{
position: absolute;
top: 50%;
left: 0px;
width: 100%;
height: 1px;
overflow: visible;
}

#inner{
width: 82px;
height: 100px;
margin-left: -41px;
position: absolute;
top: -50px;
left: 50%;
}

#logo-index{
opacity: 0;
}

最初使用不透明度0隐藏图像，并使用jQuery淡入图像。然后id像图像一样使用jQuery动画移动到页面顶部。

...的jQuery

$('#logo-index').animate({opacity: "1"}, 1500).delay(3000, function(){
    //jQuery move to top of page here...
});

我用谷歌搜索了很多不同的方法，我现在完全混淆了实现这一目标的正确方法。我没有足够的动画功能来实现这一目标。我确定那里有人。

Answer 1

为#outer设置动画，因为它是具有50％顶部位置的图像的“容器”。

$('#logo-index').animate({opacity: "1"}, 1500).delay(3000, function(){
    //jQuery move to top of page here...
    $('#outer').animate({top:"10%"}, 1500);
});

可在此处测试：jsfiddle live code to animate

我希望它有所帮助！干杯

你如何使用jQuery动画显示居中的图像

1 个答案: