在动画期间删除元素

Question

当鼠标悬停在缩略图上时，我正在显示更大尺寸的图像。缩略图和较大尺寸的图像都是动态创建的，我使用clip效果来显示更大尺寸的图像。 当鼠标从缩略图移开时，必须移除较大尺寸的图像。这是我的代码。

$(".uploadThumb").live('mouseover mouseout', function(event) {
           if (event.type == 'mouseover') {
                var src = $(this).prop("src");
                var img = $("<img class='big_thumb' src='"+src+"' width='400'/>");
                $(this).after(img);
                img.hide().show("clip", { direction: "horizontal" }, 1000);
              } else {
                  $(this).siblings(".big_thumb").remove();
              }
});

当我将鼠标移到缩略图上时，较大的图像正确显示，如果我等待动画完成，然后将鼠标从缩略图上移开，它就会被完全删除。 但是，如果我在动画（clip）完成之前移开鼠标，则不会移除较大的图像

Here is a demo of my problem

是否有任何解决方案或我必须删除动画：（（

Answer 1

您真的需要使用sibilings方法吗？

你可以写：

$(".big_thumb").remove();

一切都应该有效。

查看更新的demo。