jquery show在动画过程中创建一些奇怪的行为

iezvtpos 于 2023-03-22 发布在 jQuery

关注(0)|答案(2)|浏览(120)

下面的代码有个问题，它创建了一些奇怪的动画，一个在动画过程中将内容降低了大约1 em，然后在动画停止时将其移回。另一个在存档页面上导致了奇怪的抖动效果。

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展开之前奇怪的摇晃

jquery

来源：https://stackoverflow.com/questions/12942737/jquery-hide-show-creating-some-strange-behaviours-during-animation

2条答案

按热度按时间

ukxgm1gy1#

当jQuery开始显示和隐藏元素（在您的示例中，为.hide）时，它会自动为其添加一些CSS样式，包括overflow: hidden。在您的示例中，.hide包含一个ul，由于它没有样式化，因此采用浏览器的margin-top: 1em样式。当父容器获得overflow: hidden时，它会更改其在默认边距周围流动的方式。
最简单的选择是在内部的ul上设置margin: 0，但默认情况下也可以在容器元素上设置overflow: hidden，以消除跳转，然后相应地设置样式。