如何为jQuery实现的div展开/折叠功能添加动画效果？

嘿，这个问题我碰到好多次啦！要给你的展开/折叠操作加上平滑的动画效果，最简洁高效的方案是用CSS过渡（transition），配合你现有的toggleClass逻辑就行，几乎不用改JS代码～下面给你详细说怎么弄：

方法一：CSS Transition（推荐，性能最优） #

CSS过渡是原生浏览器特性，性能比JS动画好，而且代码维护起来更简单。关键是要在目标元素的基础样式里添加过渡规则，让类切换时的属性变化产生动画。

步骤1：修改CSS样式 #

确保你的.small和.big类定义了要过渡的属性（比如高度、宽度），同时在基础的div样式中添加transition属性：

/* 基础样式：给目标div添加过渡规则 */
div.wrapper div {
  transition: all 0.3s ease; /* 过渡所有属性，时长0.3秒，缓动效果ease */
  overflow: hidden; /* 防止内容在折叠时溢出 */
}

/* 折叠状态 */
.small {
  height: 50px;
  /* 其他折叠状态的样式，比如宽度、padding等 */
}

/* 展开状态 */
.big {
  height: 200px;
  /* 其他展开状态的样式 */
}

如果你的div内容高度不确定（比如里面的文字多少不固定），可以用max-height代替height，这样更灵活：

div.wrapper div {
  transition: max-height 0.3s ease;
  overflow: hidden;
  max-height: 50px; /* 折叠状态的最大高度 */
}

.big {
  max-height: 500px; /* 设置一个足够大的值，确保能容纳所有内容 */
}

步骤2：保持JS代码不变 #

你的原有JS逻辑完全不用修改，因为CSS会自动处理类切换时的过渡动画：

$('#click').click(function() {
  $('div.wrapper').find('div').toggleClass('small big');
});

方法二：jQuery animate（备选） #

如果你更倾向于用JS控制动画细节，可以使用jQuery的animate()方法。不过这个方案的性能不如CSS过渡，适合需要更复杂动画逻辑的场景：

$('#click').click(function() {
  const $targetDiv = $('div.wrapper').find('div');
  
  if ($targetDiv.hasClass('small')) {
    // 展开动画
    $targetDiv.animate({ height: '200px' }, 300)
              .removeClass('small')
              .addClass('big');
  } else {
    // 折叠动画
    $targetDiv.animate({ height: '50px' }, 300)
              .removeClass('big')
              .addClass('small');
  }
});

这里的300是动画时长（毫秒），你可以根据需要调整。

总结 #

优先推荐CSS Transition方案，它不仅代码简洁，而且动画性能更优，是现代网页动画的首选方式。

内容的提问来源于stack exchange，提问作者lanes123