动画css效果 - JQuery

Question

我有一张桌子。该行具有特定高度，溢出设置为隐藏。单击时，该行将向下展开，显示隐藏的内容。我使用toggle方法完成了这项工作。样式被更改以显示内容。这很完美。但我想为此添加一些滑动动画效果。在我点击之后立即发生行的扩展。相反，我希望这是以平滑的动画格式发生的，就像在一些jQuery菜单中一样。另外，如果另一行扩展，我想隐藏一个空行。

你可以看到一个工作小提琴 Here

Answer 1

不要使用.css()来更改display属性，而是尝试将其设置为display: block;，而是在同一位置使用.animate()来设置元素高度的动画。

Answer 2

如何做到这一点：
- 通过jQuery设置40px的高度，但在此之前，计算高度 '打开'元素。
- 只需点击动画即可。

DEMO

var cl4h = $('.class4').height(); // get the height of the opened .class4

$('.class4').css({ height:'40px' }); // set height to 40px;

$('.class4').toggle(function() {
    $(this).animate({ height: cl4h });
}, function() {
    $(this).animate({ height: '40px' });
});

P.S。
从CSS中删除el height: 40px;的{​​{1}}

---

如果您必须使用多个课程，请使用tha jQuery .class4进行演示：

DEMO with .data()

.data()

Answer 3

您还可以使用.fadeIn()和.fadeOut()动画，使用linear缓动选项。这会给你一个很好的过渡效果，因为.fadeIn()（很明显）不会同时发生。