Question

I am showing a bigger size image when mouse is hovered over a thumbnail. Both the thumbnail image and the bigger size image are created dynamically, I am using clip effect to show the bigger size image.
When mouse is moved away from the thumbnail the bigger size image must be removed. Here is my code.

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

When I move the mouse over the thumbnail the bigger image is appearing correctly, and if I wait for the animation to complete and then move away the mouse from the thumbnail it is getting removed perfectly.
But, If I move away the mouse before the animation(clip) is complete the bigger image is not removed

Here is a demo of my problem

Is there any solution or I have to remove the animation :((

Answer 1

Are you really need to use sibilings method?

You just can write:

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

And everything should work.

See updated demo.