jQuery点击添加CSS动画图片，首个动画结束后全部异常消失问题

你当前代码的故障核心是删除逻辑的作用域错误：每次点击触发的setTimeout回调中，使用全局类选择器$(".zoom")选中了所有添加了zoom类的图片统一删除，因此最早触发的2秒定时器执行时，会把后续点击新增的、还未完成动画的图片也一并清除。

原有CSS代码无需做任何修改，仅调整JS逻辑即可，有两种可行的修改方式：

方案1：最小改动（兼容原有定时器逻辑） #

将每次新增的图片单独存为局部变量，定时器仅删除当前点击生成的这张图片，不影响其他同时运行的动画元素：

$("button").on("click", function() {
    // 存储当前点击生成的动画元素
    const $newZoomImg = $(this).closest(".item-info")
        .find("img")
        .clone()
        .addClass("zoom")
        .appendTo("body");
    // 仅删除当前对应的动画元素，不做全局删除
    setTimeout(function(){
        $newZoomImg.remove();
    }, 2000);
});

方案2：更稳妥的动画结束监听（无需手动同步时长） #

直接监听CSS动画的结束事件自动删除元素，避免定时器和动画实际运行时长不一致的问题，可靠性更高：

$("button").on("click", function() {
    $(this).closest(".item-info")
        .find("img")
        .clone()
        .addClass("zoom")
        .appendTo("body")
        // 动画跑完后自动删除当前元素
        .on('animationend', function() {
            $(this).remove();
        });
});

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