Question

我有一些简单mouseenter / mouseleave效果的图片列表。 http://jsfiddle.net/4vTCr/

我想以下列方式修改它：当用户点击特定图片时，其不透明度应设置为1，并且应禁用mouseleave事件。

我想通过在img selected事件中添加一个类click来实现这一目标。然后在开始时我可以检查img是否有selected类。如果是，则不要应用mouseleave事件。但我不能处理它。你能给我一些提示怎么做吗？ TIA

Answer 1

你似乎非常接近答案，看看.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');

如果有人想知道如何重新打开它（花了一些时间来弄清楚，因为它不仅仅是一个开关，你必须重复你的代码，所以我把我的鼠标移动和鼠标移动事件放在一个功能）

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

        });

function 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' });

}

function 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');

}

单击添加类并禁用mouseleave事件？

2 个答案: