jQuery: bloqué animation jquery

Question

Pour un thème wordpress, je convertis des images en couleur en images noir/blanc lorsque vous les passez en revue. Mais quand vous déplacez votre souris très rapidement, parfois l'image reste en noir jusqu'à ce que vous les repassiez.

Comment puis-je résoudre ce problème pour m'assurer que lorsque je ne survolerai pas les images, il ne restera pas sur le noir & blanc?

Lien vers démo: http://www.infictus.com/wordpress_demo/creafolio/

le 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).filter(".color").show(); 
     } 

Answer 1

J'ai rencontré un problème similaire avant, et il est causé par la souris élever un nouvel événement mouseenter/mouseleave avant jQuery pourrait traiter la précédente commande show(). Le moyen le plus simple de résoudre le problème consiste à ajouter une commande générique pour que toutes les images de vos images couleur à show() avant d'exécuter votre filtre à show/hide la couleur et l'image b & w avec laquelle vous travaillez.

Donc, en gros, changer votre code à ceci:

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

Lorsque le feu de mouseenter ou d'événements MouseLeave, le script va d'abord montrer toutes les images couleur et cacher tous les b & w images. Ensuite, s'il s'agissait d'un mouseenter, le script masquerait l'image en couleur et afficherait l'image b & w.