如何在Prototype JS中待元素淡出完成后执行类名移除操作

当然可行！回调函数正是解决这类异步动画顺序执行问题的核心方案——Prototype的fade()方法本身就支持传入回调配置，让你能精准控制动画结束后的后续操作。

问题根源 #

你当前的代码里，fade()是异步执行的动画方法：它会立刻启动淡出动画，然后直接往下执行removeClassName，并不会等待动画完成。这就是为什么视觉上两个操作看起来像是同时触发的原因。

修正后的示例代码 #

只需要给fade()传入包含afterFinish回调的配置对象，就能让移除类名的操作严格等待淡出动画结束后再执行：

$('search-box').observe('click', function(e) {
  $('question-box').fade({
    // 动画完成后触发的回调函数
    afterFinish: function() {
      $('faq-box').removeClassName('left-60');
    }
  });
});

额外优化：自定义动画时长 #

如果需要调整淡出动画的速度，还可以在配置对象里添加duration属性（单位为秒），让动画节奏更符合你的需求：

$('search-box').observe('click', function(e) {
  $('question-box').fade({
    duration: 0.7, // 设置0.7秒完成淡出动画
    afterFinish: function() {
      $('faq-box').removeClassName('left-60');
    }
  });
});

这样修改后，question-box的淡出动画完全结束的瞬间，faq-box才会移除left-60类名，视觉上的顺序就完全符合预期了。

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