SlideToggle的缺陷

Question

我的slideToggle在滑动过渡的底部有点跳动。那可能是因为有一个按钮或其他东西。有什么办法可以让它更平滑？尝试使用缓动效果，但并不成功。有什么建议吗？

点击视频设置查看自己 该网站

$(document).ready(function() {
  $('.drop').click(function() {
    $(this).parent().next('li.drop_down').slideToggle();
    return false;
  });
});

- Matt Elhotiby

Answer 1

给你的 li.drop_down 设定一个固定宽度。这样应该就没问题了。我不记得具体原因了，但是我在你的网站上测试过了，可以用。
现在计算出来的宽度是 217px，试试看吧。

.drop_down {
    width: 217px;
}

编辑：看起来你还有一个.drop_down2和一个.drop_down3（也许还有更多）。你需要对它们进行相同的操作。我建议为每个指定一个公共类。

- user113716

Answer 2

尝试在动画之前存储每个项目的高度，然后在开始隐藏动画之前将该高度重新应用于元素。

这是一篇我写的文章，其中提供了一个执行此操作的示例： http://www.pewpewlaser.com/articles/jquery-smooth-animation

- KatieK

---

重复应用高度似乎是不必要的。在我的代码中，我只需将每个要切换的元素的高度设置为其计算出的高度即可。类似于 $('dd').each(function(i) { this.style.height = $(this).height(); }); 在隐藏和应用 slideToggle 之前。 - chadoh

啊，我明白了。顺便问一下，你测试用的是哪个版本的jQuery？ - KatieK

Answer 3

固定宽度对我不起作用，但是有效的方法是在动画元素上添加一个clearfix类，因为我里面有一些浮动元素。

- dfw