javascript - 动画 css 效果 - JQuery

Question

我有一张 table 。该行被赋予特定的高度，溢出被设置为隐藏。单击时，该行将向下展开显示隐藏的内容。我使用 toggle 方法完成了此操作。更改样式以显示内容。这很完美。但是我想为此添加一些滑动动画效果。单击它后，行的扩展会立即发生。相反，我希望它以流畅的动画格式发生，就像在某些 jQuery 菜单中一样。如果另一行展开，我还想隐藏一个打开的行。

你可以看到一个工作的 fiddle Here

Answer 1

只是一种方法:
- 通过 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' });
});

附言
从您的 CSS 中删除 el .class4 的 height: 40px;

---

如果您必须使用多个类，这里​​有一个使用 jQuery .data() 的演示:

DEMO with .data()

$('.class4').each(function(e) {
    var cl4h = $(this).height();    // get height of each element
    $(this).data('height', cl4h);   // and store it into .data (for each el)
});

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

$('.class4').toggle(function() {   
   $(this).animate({height: $(this).data('height') }); // call the el .data where is stored the el height
}, function() {
   $(this).animate({height: '40px'});
});