Klasse beim Klicken hinzufügen und mouseleave-Ereignis deaktivieren?

Question

Ich habe eine Liste von Bildern mit einigen einfachen mouseenter/mouseleave Effekt. http://jsfiddle.net/4vTCr/

Ich mag würde es auf folgende Weise ändern: wenn Anwender auf bestimmtes Bild, sollte die Deckkraft auf 1 und mouseleave Ereignis deaktiviert werden soll eingestellt werden.

Ich dachte, es zu tun, indem Sie eine Klasse selected auf img click Ereignis hinzufügen. Dann kann ich am Anfang überprüfen, ob imgselected Klasse hat. Wenn ja, wenden Sie nicht mouseleave Ereignis an. Aber ich kann damit nicht umgehen. Kannst du mir ein paar Tipps geben, wie es geht?

TIA

Answer 1

Sie ziemlich nah scheinen auf die Antwort, haben einen Blick auf .hasClass()

$('.covers-sublist img').addClass('opacity').on({ 
    mouseenter: function() { 
     $(this).stop().animate({opacity: 1}); 
    }, 
    mouseleave: function() { 
     if (!$(this).hasClass('clicked')){ 
      $(this).stop().animate({opacity: 0.4}); 
     } 
    }, 
    click: function() { 
     $(this) 
      .stop() 
      .animate({opacity: 1}) 
      .addClass('clicked'); 
    } 
}); 

Answer 2

This did the trick for me 

    $("#id").click(function(){ 
      $("#id").off("mouseleave"); 
     }); 

or $('#id').off('mouseleave mouseover'); 

und wenn jemand fragt sich, wie es auf wechseln (dauerte eine Weile, um herauszufinden, wie der nicht nur wie ein Schalter, müssen Sie Ihren Code wiederholen, so deshalb habe ich meine Mouseover & mouseleave Ereignisse in einer Funktion)

$('#id').click(function() { 
      $('.class').on('mouseover', mouseoverEvents); 
      $('.class).on('mouseleave', mouseleaveEvents); 

     }); 

Funktion mouseoverEvents() {

var origImg = ($(this).find('.imageUrl')); 

if (origImg.is('img')) { 
    Pixastic.process(origImg[0], 'blurfast', { amount: 1 }); 
} 

$(this).find('.moreInfo, .addIcon').removeClass('displayNone'); 
$(this).find('.productText').height('100%'); 
$(this).find('.productText').stop().animate({ 'top': '-1.5vw' }); 

}

Funktion mouseleaveEvents() {

var origImg = ($(this).find('.imageUrl')); 

Pixastic.revert($(this).find('.imageUrl')[0]); 

$(this).find('.productText').stop().animate({ 'top': '0' }); 
$(this).find('.moreInfo, .addIcon').addClass('displayNone'); 

}