如何在JavaScript中为追加的内容添加几秒后的淡出效果

直接调整你的addContent函数，把新创建的内容元素先设为隐藏，再链式调用淡入、延迟、淡出的方法，同时保留原有的滚动逻辑：

function addContent(payload) {
    // Container
    let content = $('#paper');
    // 创建新的item元素并默认隐藏，准备执行动画链
    let newItem = $("<div class='item'>" + payload + "</div><br>").hide();
    content.append(newItem);

    // 执行淡入-延迟-淡出的动画流程
    newItem.fadeIn('fast').delay(5000).fadeOut('fast');

    // 滚动到容器底部
    content.animate({ scrollTop: content.get(0).scrollHeight }, 333);
}

关键说明： #

• 先通过hide()把新元素默认隐藏，这样后续的fadeIn才能呈现出淡入效果
• 将新元素单独存为变量newItem，方便精准对这条新内容执行动画，不会影响容器内其他已有内容
• 完整保留了你原有的滚动逻辑，确保新内容出现后页面自动滚动到底部

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