Question

我尝试使用jQuery在我的UI上做一些不错的动画，然后使用Bootstrap构建。我的HTML中有两个<DIV>：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 {s} <DIV> #slidedown向下滑动<DIV> #fadein将占用的空间量;然后，当它被移动时（使用delay(1000)，淡出<DIV> #fadein。<DIV> #slidedown向下移动的情况会怎样很好，但是立即#fadein开始显示它跳到页面。我怀疑这与#slidedown position: relative的位置有关＃39} ; s父对象，当#fadein <DIV>开始出现时成为新的父级。

我的想法是在调用该函数时捕获.offset() #slidedown，并在fadeIn()方法之前将.css的{{1}}值重置为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完成时调用该函数。奇

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

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

1 个答案: