javascript - 在动画期间移除元素

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

这是我的问题的演示

有什么解决方案或者我必须删除动画:((

Answer 1

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

你可以写：

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

一切都应该工作。

请参阅更新的演示。