1

一些上下文：我正在尝试动画滚动到特定元素，我通过调用以下代码来完成此操作$(document).ready()：

$('html, body').animate(                                                                      
  // properties                                                                                 
  {
    scrollTop: $("#element").offset().top                                 
  },
  // duration                                                                                   
  500,
  // easing
  "easeOutCubic"
);

我的问题是，对于某些元素，$("#element").offset().top实际上会在我启动动画和将其变为目标元素的时间之间发生变化。

我的元素是完全静态的：我不执行 DOM 操作，也不调整任何东西的大小。我在 CSS 中指定尺寸，等到$(document).ready()，然后向下滚动。

我可能做错了什么？我是否过早地启动动画，或者在不正确的事件处理程序中？动画的行为会以某种方式修改我的元素的位置吗？

可能的相关点：

  • 我正在使用 Google 网络字体和多种面孔样式。也许有一些渲染错误？
  • 我在谷歌浏览器中运行它。我已经检查过了，这个问题并没有在 Safari 中表现出来。编辑：不，它也发生在 Safari 中。
4

2 回答 2

1

我对此进行了调查，Chrome 时间线检查器显示在触发动画后正在接收字体。这意味着我选择的滚动是基于目标元素在应用谷歌网络字体之前的任何临时位置。

很明显，这ready()不是放置此代码的地方。我的下一步将是找出合适的位置。

编辑：

原来放置此代码的正确位置是在load处理程序中。将代码移入该方法会导致此问题消失。

于 2013-08-17T19:40:19.233 回答
-1

对我来说，这似乎是当父母不是相对的但孩子是绝对的时通常会发生的问题。请查看动画元素的父元素的动画需要是相对的，然后如果您只是调整顶部/左侧动画将导致您需要的效果

于 2013-08-17T16:26:08.050 回答