您如何使用 jQuery 设置居中图像顶部的动画答案

【问题标题】：How do you animate to top a centered Image with jQuery您如何使用 jQuery 设置居中图像顶部的动画
【发布时间】：2012-08-15 17:34:38
【问题描述】：

我有一个简单的网页，由水平和垂直居中的图像组成，因此它显示在可见页面的绝对中心。我正在尝试使用 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 淡入显示。然后使用 jQuery animate 将图像移到页面顶部。

jQuery...

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

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

【问题讨论】：

标签： jquery jquery-animate

【解决方案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

希望对你有帮助！干杯

【讨论】：

这很好，它确实有效。这可以针对顶部的固定位置而不是百分比来完成吗？我似乎无法让它在距离顶部 100px 处工作。
是的！您可以，但在这种情况下，您还需要以 px 为单位指定 #outer 的顶部位置。即 px 中的 css 和 px 中的 $.animate （或两者都在 % 中）
或者使用 jQuery v1.8.0 已经修复了这个错误，让你在动画函数中混合百分比和像素。