Question

我遇到了以下代码的问题，它创建了一些奇怪的动画，一个在动画期间将内容降低大约1em，然后在停止时将其移回。存档页面上的另一个会产生奇怪的抖动效果。

    jQuery(document).ready(function() {
      jQuery(".hide").hide();
      //toggle the componenet with class msg_body
      jQuery(".show").click(function()
      {
        jQuery(this).next(".hide").slideToggle(500);
      });
    });

http://msc-media.co.uk/about/

点击关于页面底部的“待办事项”

http://msc-media.co.uk/tag/france/

点击任何一天 - 在div扩展之前发生奇怪的晃动

Answer 1

当jQuery开始显示并隐藏元素时（在您的示例中为.hide），它会自动添加一些CSS样式，包括overflow: hidden。这是导致跳跃的原因;在您的示例中，.hide包含ul，由于它没有样式，因此采用浏览器的margin-top: 1em样式。当父容器获得overflow: hidden时，它会改变它绕这些默认边距流动的方式。

您最简单的选择是在内部margin: 0上设置ul，但您也可以默认设置容器元素上的overflow: hidden以消除跳转，然后相应地设置样式。

jQuery .hide .show在动画期间创建一些奇怪的行为

1 个答案: