jQuery: stuck jquery animation

For a wordpress theme I convert colored images to black/white images when you go over them. But when you move your mouse really fast sometimes the image remains in black & white till you go over them again.

How can I fix this to make sure that when I don't hover the images it won't stay on black & white?

Link to demo: http://www.infictus.com/wordpress_demo/creafolio/

the code:

function initImage(obj)
      {
        var $newthis = $(obj);
        if ($.browser.msie)
        {
          $newthis = $newthis.desaturateImgFix();
        }
        $newthis.addClass("pair_" + ++paircount);
        var $cloned = $newthis.clone().attr('id', '');
        $cloned.get(0).onmouseover = null;
        $cloned.insertAfter($newthis).addClass("color").hide();
        $newthis = $newthis.desaturate();
        $newthis.bind("mouseenter mouseleave", desevent);
        $cloned.bind("mouseenter mouseleave", desevent);
      };

      function desevent(event) 
      {
        var classString = new String($(this).attr('class'));
        var pair = classString.match(/pair_\d+/);
        // first I try was $("."+pair).toggle() but IE switching very strange...
        $("."+pair).hide();
        if (event.type == 'mouseenter')
            $("."+pair).filter(":not(.color)").show(); 
        if (event.type == 'mouseleave')
            $("."+pair).开发者_Go百科filter(".color").show();
      }

---

I've run into a similar problem before, and it's caused by the mouse raising a new mouseenter/mouseleave event before jQuery could process the previous show() command. The easiest way to fix the problem is to add a generic command to cause all of your color images to show() before running your filter to show/hide the color and b&w image you're working with.

So, basically, change your code to this:

function desevent(event) {
    var classString = new String($(this).attr('class')),
        pair = classString.match(/pair_\d+/);

    $(".color").show();
    $(":not(.color)").hide();

    if (event.type == 'mouseenter')
        $("." + pair).filter(".color").hide();
        $("." + pair).filter(":not(.color)").show(); 
}

When the mouseenter or mouseleave events fire, the script will first show all of the color images and hide all of the b&w images. Then, if it was a mouseenter, the script will hide the color image and show the b&w image.