Question

对于wordpress主题，我会将彩色图像转换为黑白图像。但是，当您快速移动鼠标时，图像仍保持黑色和黑色。白色，直到你再次过去。

如何解决这个问题，以确保当我不悬停图像时，它不会留在黑色和白？

演示链接：http://www.infictus.com/wordpress_demo/creafolio/

代码：

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

之前我遇到过类似的问题，这是由于鼠标在jQuery处理上一个show()命令之前引发一个新的mouseenter / mouseleave事件引起的。解决问题的最简单方法是在将过滤器运行到show() / show之前添加一个通用命令，使所有的彩色图像都显示为hide你正在使用的颜色和b＆amp; w图像。

所以，基本上，将代码更改为：

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

当mouseenter或mouseleave事件触发时，脚本将首先显示所有彩色图像并隐藏所有b＆amp; w图像。然后，如果它是一个mouseenter，脚本将隐藏彩色图像并显示b＆amp; w图像。

jQuery：卡住了jquery动画

1 个答案: