动画css效果- JQuery

Animate css effect - JQuery

本文关键字：JQuery 效果 css 动画      更新时间：2023-09-26

我有一个表。指定行高度，并将溢出设置为隐藏。单击后，该行将向下展开，显示隐藏的内容。我用toggle方法做了这个。更改样式以显示内容。这是完美的。但我想给它添加一些滑动动画效果。在我单击行之后，它立即展开。相反，我希望它以平滑的动画格式发生，就像在一些jQuery菜单中一样。另外，如果另一行展开，我想隐藏一个打开的行。

您可以看到一个正在工作的小提琴这里

就是这样做的:
-通过jQuery设置高度为40px，但在此之前，计算的高度"打开"元素。
-点击动画。

演示
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中删除height: 40px;为el .class4

如果你必须使用多个类，这里有一个使用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'});
});

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

您也可以使用.fadeIn()和.fadeOut()动画，使用linear easing选项。这将给你一个很好的过渡效果，因为.fadeIn()(显然)不会一次发生。

相关文章：