jquery：如何设置包含背景图像而不包含其他内容的DIV的动画或简化其收缩

我有一个仅显示其背景图像的div：

  .foo
{
 height: 55px; width: 33px;
background: url('../images/foo.png');
 background-repeat: no-repeat; 
background-position:center; 
background-size: contain;
-moz-background-size: contain;
 color: transparent;
}

我想把它缩小到1倍的高度；宽度：33px，然后，当收缩完成时，通过在动画完成时调用回调函数将其从DOM中移除

我尝试过switchClass，但删除了。foo会删除背景图像，div会立即收缩，而不是在指定的持续时间内收缩，回调函数会立即启动。

与回调函数一起使用：

$(".foo").animate({ height: 1 }, 500, function(){
    $(this).remove();
});

---

其中

500

是以毫秒为单位的持续时间。

谢谢您，它应该可以工作，但不可靠。它通常会在页面上留下一个残留的收缩图像，好像调用回调时动画的效果仍在继续。当然，这不是你的错，但我不愿意接受答案，因为实现是不可靠的。你能提供一个实例，或者让我检查一下这个问题吗？我已经在Codepen上创建了一个工作示例，它没有显示您提到的残留收缩图像：好的，让我看看是否可以将其组合起来。这个问题可能涉及一些击倒jQuery的交互。该项通过使用foreach绑定从绑定到容器div的knockout-observearray中删除，从而间接从DOM中删除。你的例子似乎很有效。谢谢你的帮助。我还处理了十几个浮动div中的小图像。在你的“牌”上加16张牌。随机删除，注意点击次数。有时只需不到16次点击就可以删除整只手；正在删除多张卡。我没用过击倒。我建议您编辑您的问题并添加淘汰标签。另外，显示相关的JS。