使用 jQuery .animate 和 Bootstrap 定位 <div>答案

【问题标题】：Positioning <div>s using jQuery .animate and Bootstrap使用 jQuery .animate 和 Bootstrap 定位 <div>
【发布时间】：2014-09-19 21:42:36
【问题描述】：

我正在尝试使用 jQuery 在我的 UI 上制作一些漂亮的动画，而这些动画又是使用 Bootstrap 构建的。我的 HTML 中有两个 <DIV>s：id="fadein"（其中有 style="display:none"）和 id="slidedown"。这是我的脚本：

<script language="javascript">
function doAnimations() {
  var height = $('#fadein').height();
  $('#slidedown').animate({top: height + "px"}, {duration: 1000});
  $('#fadein').delay(1000).fadeIn({duration: 1000});
};
function init() {
  setTimeout(doAnimations(), 500);
};
window.onload = init;
</script>

我想要发生的是，当页面加载时，500 毫秒后 <DIV> #slidedown 向下滑动 <DIV> #fadein 将占用的空间量；然后，当它被移动时（通过使用delay(1000)，淡入<DIV> #fadein。发生的情况是<DIV> #slidedown 确实很好地向下移动，但立即#fadein开始出现它跳下页面。我怀疑这是因为#slidedown 的位置是position: relative 到它的父对象，并且当#fadein <DIV> 开始出现那个成为它的新父母。

我的想法是在调用函数时捕获 #slidedown 的 .offset() 和在 fadeIn() 方法之前将 top 的 .css 值重置为该值以将其固定到位 - 但是好像没什么区别。

在.animate 完成后，是否有人对如何最好地阻止#slidedown 进一步移动有任何建议？谢谢！

【问题讨论】：

标签： jquery css twitter-bootstrap jquery-animate

【解决方案1】：

好的，我修复了它 :) 在.animate 完成并让它工作后，我使用了一个函数回调。新函数如下所示：

function doAnimations() {
  var originalOffset = $('#slidedown').offset();
  var moveBy = parseInt($('#fadein').height());
  $('#slidedown').animate({top: moveBy + "px"}, 1000, function() {
    $('#slidedown').offset({top: parseInt(originalOffset.top), left: parseInt(originalOffset.left)});
    $('#fadein').fadeIn({duration: 1000});
  });
};

那么为什么它以前不工作？似乎使用{duration: 1000} 的持续时间停止了调用该函数，但是当我将其更改为一个简单的数字时，它起作用并在.animate 完成时调用了该函数。奇怪。

如果有人有比这更优雅的解决方案，我很想听听他们 - 我还在学习这些东西！

【讨论】：