如何为单个按钮(div)控制的div添加fadeIn/fadeOut淡入淡出效果

• 直接调用fadeIn()/fadeOut()方法时，jQuery会自动为目标元素添加display: none样式，你绑定点击事件的元素就是.text_container本身，所以执行隐藏操作时整个触发控件也会被隐藏，无法再次触发点击事件。
• 仅切换hidden/visible类的逻辑没有搭配过渡效果，是直接跳转显示状态，所以看不到淡入淡出的渐变过程。

方案1：使用jQuery内置fadeToggle()（最简实现） #

这一方案完全符合你补充提到的用toggle实现的思路，fadeToggle是jQuery专门用于淡入淡出切换的内置方法，不用手动维护类状态：

注意：该方案更适合点击其他独立控件（比如按钮）控制.text_container显示隐藏的场景，避免目标元素隐藏后无法触发点击事件

$(document).ready(function(){
  // 初始隐藏文本容器
  $('.text_container').hide();
  // 绑定点击事件到独立的触发控件，示例为类是toggle_btn的按钮
  $('.toggle_btn').click(function() {
    // 300为动画时长，单位毫秒，可根据需求自定义
    $('.text_container').fadeToggle(300);
  });
});

方案2：CSS过渡配合类切换（适合点击自身切换的场景） #

如果你的需求是点击.text_container自身完成显示隐藏切换，可以用CSS过渡实现淡入淡出效果，不会让元素完全消失导致无法触发后续点击：
首先添加对应CSS样式：

.text_container {
  /* 定义淡入淡出过渡，0.3s为动画时长，可自定义 */
  transition: opacity 0.3s ease;
}
.text_container.hidden {
  opacity: 0;
  /* 隐藏时禁止响应点击，可根据业务需求保留或删除 */
  pointer-events: none;
  /* 不要添加display:none，否则会失去过渡动画效果 */
}
.text_container.visible {
  opacity: 1;
  pointer-events: auto;
}

JS代码也可以用toggleClass简化原有逻辑：

$(document).ready(function(){
  $('.text_container').addClass("hidden");
  $('.text_container').click(function() {
    $(this).toggleClass("hidden visible");
  });
});

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