jquery - 使用 jQuery .animate 和 Bootstrap 定位 <div>

Question

我正在尝试使用 jQuery 在我的 UI 上制作一些漂亮的动画，而这些动画又是使用 Bootstrap 构建的。我有两个<DIV> s 在我的 HTML 中: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> 开始出现时 that 成为它的新 parent 。

我的想法是捕捉 .offset()的 #slidedown在调用函数时，就在 fadeIn() 之前重置.css的方法top 的值到这个值以将其固定到位 - 但这似乎没有任何区别。

有没有人对如何最好地停止有任何建议#slidedown当 .animate 时进一步移动完成了吗？谢谢!

Answer 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 时调用该函数完全的。奇怪。

如果有人有比这更优雅的解决方案，我很乐意听取他们的意见 - 我仍在学习这些东西!