Question

我在使用Scriptaculous BlindDown和SlideDown效果时会看到一个奇怪的现象，它们会平滑地滑动，然后在最后，它们会跳跃额外的数量，可能是滑动距离的10％。

我已经看到BlindDown页面上的注释，你必须确保不要使用填充，我已经完成了。

我仍然认为这一定是我的错误，当我注意到，当我点击Blind或Slide演示时，我看到Toggle的演示页面上发生了完全相同的事情： http://wiki.github.com/madrobby/scriptaculous/effect-toggle

Firefox 3.6.7，Chrome 6和Internet Explorer 8都会在我的计算机上显示此效果。

所以当我注意到BlindDown的页面没有显示这种效果时，我正在考虑将其写下来，或者与它一起生活或者将效果剪掉。 http://wiki.github.com/madrobby/scriptaculous/effect-blinddown

所以必须有办法让这项工作。在我的页面上，无论是直接使用BlindDown / Slide还是使用Toggle，都会发生跳转。

有没有人使用过这些并设法这样做没有这个问题？关于秘密是什么的任何想法？

Answer 1

这通常是由于边距或填充。你失明的元素不能有任何边距或填充，或者应该有margin:0.1%，这样包含的边距也不会通过元素的边界折叠。如果你这样做，它就像丝绸一样光滑。

另外 - 确保您已设置overflow:hidden

享受。

（如果你没有定义高度，那么它会倒下的另一个地方。如果你在动画之前做了这个小咒语，它就会得到并设置你的身高而不会打扰其他任何东西。

  elem.setStyle({position:'absolute',visiblity:'invisible'});
  elem.setStyle({'height':elem.getDimensions().height+'px'});
  elem.setStyle({position:'relative',visibility:'visible'}); //or position:'static'

Answer 2

根据我的经验，跳转只是一个性能问题，这受到系统规格，浏览器和您正在切换的html内容的复杂性的影响。像safari和chrome这样的浏览器有一个非常好的javascript引擎，使它们更有效率。

我发现即使使用铬也会发生这种情况？ HTML内容特别复杂，或者您的计算机是否因应用程序运行而超载？

Answer 3

肯定有一个非常着名的秘密......你有没有尝试将你的内容包装在一个额外的div容器中？在使用Scriptaculous效果时，您应该考虑这种最佳实践和几乎所有要求。

例如......假设您想要滑动或切换登录表单 - 并且您有::

<div id="login-panel">
   <input type="text" name="username" />
   <button type="submit" name="send">Login</button>
</div>

您所要做的就是添加一个额外的内部div标签::

<div id="login-panel">
<div><!-- extra div here -->
   <input type="text" name="username" />
   <button type="submit" name="send">Login</button>
</div><!-- close it here -->
</div>

现在当你做一些像Effect.toggle（“login-panel”，'slide'）这样的事情时;过渡应该更顺畅，更少跳跃。它似乎有点草率但它几乎总是有帮助。希望这可以帮助你!!

Answer 4

请记住，当Scriptaculous开始动画时，正在修改的容器将被绝对定位，然后将记录高度，类似于danielsherson所提到的。然而，如果容器不存在于相对定位的父容器内，那么动画容器的尺寸可能会非常剧烈地改变。测试这个的最简单方法是使用firebug修改容器，将位置设置为绝对值。怎么了？高度变化了吗？为了获得最佳效果，切换到绝对定位时，动画容器的尺寸不应有任何变化。文档的其余部分会发生什么变化，例如下面移动的内容，无关紧要。

填充/边距问题也很棘手，因为实际上没有办法阻止边距重叠和创建问题。我发现解决此问题的最佳方法是将您的动画容器设置为浮动，然后在父容器上使用clearfix hack以确保没有任何重叠。

<body style="margin: 0 auto; width: 300px; position: relative; background: black;">
  <div class="parent nonanimating clearfix">
    <div class="animating" style="float: left; width: 100%; background: white;">
      <div class="apply-your-margins-and-padding-here">
         ...content...
      </div>
    </div>
  </div>
  <div class="parent nonanimating clearfix">
    <div class="animating" style="float: left; width: 100%; background: white;">
      <div class="apply-your-margins-and-padding-here">
         ...content...
      </div>
    </div>
  </div>
</body>

请注意，这些类不起作用，只是为了引用我的注释，但clearfix除外，它是float clear hack。仅指定背景和宽度以更好地展示正在发生的事情。添加你想要的任何动画$$（'。动画'）

我使用这个（有很多），虽然它已经很老了，但我甚至没有为这个黑客支持的许多浏览器设计..

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}
.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Answer 5

我认为这根本不是性能问题。我有同样的问题。我能够让它不跳的唯一方法是为我滑动的div定义一个高度。我意识到这不是一个好的解决方案，但它是我能找到的唯一一个。我也尝试添加额外的div，它对Effect.toggle幻灯片的工作方式没有影响。

如果其他人对此有任何更多信息，我会全力以赴。

Answer 6

要防止跳跃或抽搐的Scriptaculous效果，请从要应用效果的元素中删除“style”属性。

这：

<div id="mydiv" style="padding:10px;margin:10px;">
  <button onClick="new Effect.BlindUp('mydiv');" />         
</div>

变为：

<div id="mydiv">
  <button onClick="new Effect.BlindUp('mydiv');" />         
</div>

样式可以放在一个封闭的div中，如下所示：

<div id="mydiv">
  <div style="padding:10px;margin:10px;">
    <button onClick="new Effect.BlindUp('mydiv');" />
  </div>        
</div>

问题是由Scriptaculous在执行效果后重新应用元素的（mydiv）内联样式声明引起的。

Answer 7

我发现使用幻灯片/盲动画在块元素上使用position: relative;是成功的。确保填充/边距放在子元素上，而不是滑块元素。

Scriptaculous：如何使盲或滑平滑而不跳？还是不可能？

7 个答案: