JQuery: застрял анимации JQuery - PullRequest
Новая
       3

JQuery: застрял анимации JQuery

0 голосов
/ 04 ноября 2010

Для темы 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();
      }

1 Ответ

1 голос
/ 04 ноября 2010

Ранее я сталкивался с подобной проблемой, и она вызвана тем, что мышь вызвала новое событие mouseenter / mouseleave, прежде чем jQuery смог обработать предыдущую команду show(). Самый простой способ решить эту проблему - добавить общую команду, которая заставит все ваших цветных изображений в show() перед тем, как запустить фильтр для show / hide цветного и черно-белого изображения работа с.

Итак, в основном измените ваш код на: 

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 срабатывают, сценарий сначала показывает все цветные изображения и скрывает все черно-белые изображения. Затем, если это был указатель мыши, сценарий скроет цветное изображение и покажет черно-белое изображение.

...