代码中修改CSS仅生效一次问题求助

嘿，我明白你遇到的麻烦了——答题反馈的图片只显示一次，之后就再也弹不出来了对吧？核心问题其实出在fadeOut动画的默认行为上，咱们一步步来解决：

问题根源 #

jQuery的fadeOut()方法执行完毕后，会自动把元素的display属性设为none，而不是你以为的只改透明度或visibility。这时候哪怕你手动把visibility改回visible，元素也不会显示——因为display: none会让元素完全从页面布局中消失，根本不会被渲染。

解决方案：动画完成后正确重置元素状态 #

你需要在fadeOut的回调函数里，把元素的状态完全重置为初始可触发的状态，具体步骤如下：

1. 初始HTML设置 #

先确保图片的初始样式里，display是block（或inline-block，根据你的布局需求），只通过visibility控制显示隐藏：

<img id="feedback-img" src="" style="visibility: hidden; display: block; opacity: 1;" alt="答题反馈">

2. 答题逻辑代码（jQuery版本） #

// 处理答对情况
function showCorrectFeedback() {
  const feedbackImg = $('#feedback-img');
  // 1. 切换到绿色对勾图片
  feedbackImg.attr('src', 'green-check.png');
  // 2. 显示图片（重置visibility和display，防止之前的动画影响）
  feedbackImg.css({
    'visibility': 'visible',
    'display': 'block',
    'opacity': 1
  });
  // 3. 执行淡出动画，完成后重置状态
  feedbackImg.fadeOut(1000, function() {
    $(this).css({
      'visibility': 'hidden',
      'display': 'block', // 关键：保持display为block，下次才能正常显示
      'opacity': 1
    });
  });
}

// 处理答错情况
function showWrongFeedback() {
  const feedbackImg = $('#feedback-img');
  feedbackImg.attr('src', 'red-cross.png');
  feedbackImg.css({
    'visibility': 'visible',
    'display': 'block',
    'opacity': 1
  });
  feedbackImg.fadeOut(1000, function() {
    $(this).css({
      'visibility': 'hidden',
      'display': 'block',
      'opacity': 1
    });
  });
}

3. 原生JS版本（如果不用jQuery） #

const feedbackImg = document.getElementById('feedback-img');

function showFeedback(isCorrect) {
  // 先重置所有状态，确保元素可被渲染
  feedbackImg.style.display = 'block';
  feedbackImg.style.visibility = 'visible';
  feedbackImg.style.opacity = '1';

  // 切换对应图片
  feedbackImg.src = isCorrect ? 'green-check.png' : 'red-cross.png';

  // 执行淡出动画
  feedbackImg.animate({ opacity: 0 }, 1000, function() {
    // 动画结束后重置状态
    feedbackImg.style.visibility = 'hidden';
    feedbackImg.style.opacity = '1';
    feedbackImg.style.display = 'block'; // 必须保留display，否则下次无法显示
  });
}

额外小提示 #

如果你的反馈弹窗是独立的容器（比如带背景的div包裹图片），逻辑是一样的——重点就是动画结束后不要让元素的display变成none，只用visibility来控制隐藏，同时重置透明度，这样下次触发时才能正常显示。

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