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();
              }
});

当我将鼠标移到缩略图上时，更大的图像会正确显示，如果我等待动画完成然后将鼠标从缩略图上移开，它将被完美删除。但是，如果我在动画(剪辑)完成之前移开鼠标，则不会删除更大的图像

<强> Here is a demo of my problem

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

Answer 1

您真的需要使用 sibilings方法？

你可以写:

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

一切都应该正常。

查看更新demo .