-1

我有一个简单的网页，由水平和垂直居中的图像组成，因此它显示在可见页面的绝对中心。我正在尝试使用 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;
}

图像最初使用 opacity 0 隐藏，然后使用 jQuery 淡入查看。然后 id 喜欢使用 jQuery animate 将图像移动到页面顶部。

jQuery...

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

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

4

1 回答 1

0

动画#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

我希望它有帮助！干杯

于 2012-08-15T18:32:45.913 回答