Question

前段时间我开始用JavaScript编写一些代码来学习它。我选择了rollin / rollout动画作为'project'。（我知道JQuery的slideDown / slideUp，但我想使用纯JavaScript。）

我完成了我的效果，除了Firefox（测试版本22.x到最新版本（25.0.1））之外，所有主流浏览器的结果都很不错。在Firefox中，当它在Chrome，Opera和Internet Explorer中顺利滚动时，滚动（进出）口吃。

一般方法（毫不奇怪）将元素的style.height（或width）属性在给定时间内按某些像素增加/减少几次。为了避免每次效果发生时计算大小，我计算它们一次并将它们放在一个数组中（第一项（0 + stepSize），最后一项需要高度/宽度）。元素高度的降低由此函数完成：

var verticalRollInWorker = function(step) {
  if (step > 0) {
    $(btt).style.height = stepSizes[step - 1];

    setTimeout(function() { verticalRollInWorker(step - 1); }, delay);
  } else {
    $(btt).style.display = "none";
    $(btt).style.height = 0;
    // Enable roll out effect:
    stateChange(false);
    if (afterFullRollIn != null) {
      afterFullRollIn();
    }
  }
}

在特定示例中，我使用超过400毫秒的20步。数组中的步长被舍入为整数，这就是为什么最后一步只设置0 - 来处理舍入差异。

（为方便起见，我编写了自己的$（元素）助手，这里没有涉及JQuery。）

我在没有Add-Ons的情况下测试了Firefox，没有区别。

我非常感谢您提供的任何帮助：）

Answer 1

我在上面的代码中注意到的一个问题是你使用了$（btt）。因此，当函数迭代时，每20秒，浏览器需要获取jQuery对象。您可以将其存储到变量中，例如“ var BTT = $（btt）;”并使用此BTT。获取jQuery对象是一项耗时的任务。

由于您正在使用setTimeout（），因此无论当前执行完成如何，该函数都将每20ms执行一次，这也可能导致拖动。正如Dagg Nabbit所说，你可以使用setTimeout的setInterval（） instad。

另一个可能的原因可能是浏览器重排。我制作了一个个性化的滚动条，发现我的FF中的浏览器重排比Chrome或IE明显更大。这取决于元素的大小，DOM树深度，溢出属性等等......

再次使用此代码并查看它是否已修复。将减法减少为1个代码。

var BTT=$(btt).get(0);
var verticalRollInWorker = function(step) {
  if (step > 0) {
    step--;
    BTT.style.height = stepSizes[step];
    setTimeout(function() { verticalRollInWorker(step); }, delay);
  }
  else {
    BTT.style.display = "none";
    BTT.style.height = 0;
    // Enable roll out effect:
    stateChange(false);
    if (afterFullRollIn != null) {
      afterFullRollIn();
    }
  }
}

只有在看到实例后才能进行进一步的评论。问候。

在Firefox中自写的推出动画口吃

1 个答案: