Animation "stops" when hovering

I'm using Masonry with filtering (link masonry) on my site. I'm trying to implement a "fade" function on the objects in the list.

The problem is that when I filter, and quickly move over the mouse when the animation is running, all the divs get stuck.

Here's the code I'm using:

<script type="text/javascript">

$(document).ready(function() { 

  //area 1 
  $('.wrap').children().not('.col2').hover(function() { 

    $(this).siblings().stop().fadeTo(500,0.5); 

  }, function() { 

    $(this).siblings().stop().fadeTo(500,1); 开发者_JAVA百科

  }); 
 }); 

</script>    

Not sure if it's actually what your issue is, but .stop() without parameters won't clear the animation queue or jump to the end of it, so it will just stop in the middle of a fade (is this what you're referring to?).

Try calling .stop(true, true) instead.