jquery removeClass 'работает', но эффекты класса продолжаются

Во-первых, помните, что я новичок в веб-дизайне, JS и во всем этом, пожалуйста. Любое предложение будет оценено:) У меня есть значки img (serviceIcon), расположенные "абсолютно" в соответствии с их конкретным классом (serviceHardware,...).

<div class="servicesBox">
    <img class="serviceIcon serviceHardware" />
    <img class="serviceIcon serviceSoftware" />
    <img class="serviceIcon serviceNetwork" />
</div>

Все просто: при наведении курсора на непрозрачные элементы изменяется непрозрачность, а при наведении размер изменяется; mouseleave оживляет все до их прежнего состояния; щелчок анимирует IMG, на который нажали, в угол, СЛЕДУЕТ удалить класс serviceIcon (чтобы не вызывать mouseover/mouseleave, верно?) и переместиться вниз (в примере) на img без щелчка, и добавить класс serviceSelected к элементу, на который нажали.

$("img.serviceIcon").click(function(){

    $("img.serviceIcon").not(this)
        .animate({
            top:'45px',
        });

    $(this).removeClass("serviceIcon")
        .animate({
            left:'150px'
        }, 300, function(){
            origLeft = $(this).css('left');
            $(this).addClass("serviceSelected");
            //alert(origLeft);
        });
});

НО, как вы можете видеть прямо здесь ( http://jsfiddle.net/rcvmQ/4/), нажатый img продолжает вызывать события mouseover/mouseleave, соответствующие классу serviceIcon (уже удаленный при нажатии), и если вы осмотрите элемент, вы увидите видите, у него больше нет класса serviceIcon. Что я здесь не так делаю? Может быть все? ИДК.

На самом деле, он добавляет класс serviceSelected, но если вы щелкнете по нему, то никогда не вызовет событие click этого класса. Weird. Я протестировал это в Firefox и Safari, и оба ведут себя одинаково.

Я добавил дополнительную проверку кода проверки в событии click serviceItem, имеет ли он класс serviceSelected, который вообще НЕ является ЛОГИЧЕСКИМ. Я отказываюсь использовать это, даже если это работает!! Спасибо!

Редактировать: Код о наведении курсора / mouseleave

$("img.serviceIcon").mouseover(function(){
    $(".serviceIcon").not(this)
                        .animate({
                            opacity:'0.3'
                        }, 100);
    $(this).animate({
        width   :'25px',
        height  :'40px',
        opacity :1
    },200);
});

$("img.serviceIcon").mouseleave(function(){
$("img.serviceIcon").stop(true,true)
                        .animate({
                            width   :'20px',
                            height  :'40px',
                            opacity :'1'
                        },100);
});
Источник

2 ответа

Решение

Уберите mouseover событие

http://jsfiddle.net/rcvmQ/5/

   $(this).off('mouseover').removeClass("serviceIcon")
            .animate({
                left:'150px'
            },300, function(){
                origLeft = $(this).css('left');
                $(this).addClass("serviceSelected");
                //alert(origLeft);
            });
Источник

Прочитав о.on() и.off(), я внес некоторые изменения в код, и он, похоже, работает. Я создал 2 функции:

function clickIcon(){ ... }
function restoreIcons(){ ... }

По сути, они содержат код для события click для классов serviceIcon и serviceSelected. Как вы показали мне, я отключаю событие click, когда щелкаю serviceIcon, отсоединяю его, а затем включаю (связываю) событие click для класса serviceSelected, обрабатываемого функцией restoreIcons().

function clickIcon(){
    leftPos = $(this).css('left');
    //alert(leftPos);
    $("img.serviceIcon").not(this)
                        .animate({
                            top     :'80px',
                        }); 
        //turning off 'click' for serviceIcon   
    $(this).off('click').removeClass("serviceIcon")
                    .animate({
                        left:'300px'
                    },200, function(){
                        $(this).addClass("serviceSelected");
                                            // turning on 'click' for serviceSelected
                    $('img.serviceSelected').on('click',restoreIcons);
                    });         
}

Внутри функции restoreIcon я отключил событие "click" для serviceSelected и снова включил событие "click" для serviceIcon (обрабатывается clickIcon()).

function restoreIcons(){
    $(this).animate({
            left    :leftPos
        },200, function(){
            $(this).off('click')
                    .removeClass('serviceSelected')
                    .addClass('serviceIcon');
            $('img.serviceIcon').animate({
                            top:'0px'
                        },100);
            $('img.serviceIcon').on('click', clickIcon);
        });
}

Вы можете увидеть полный код здесь ( http://jsfiddle.net/rcvmQ/9/).

Это работает отлично, по крайней мере, при первом нажатии на каждый значок. После этого я замечаю серьезную задержку, если я начинаю нажимать на них несколько раз, и каждый раз становится длиннее. Для меня, похоже, время для обработки включения и выключения, может быть? Другая вещь, о которой я думаю, может состоять в том, что я не отменил события mouseenter/mouseleave, так что, может быть, это происходит одновременно. Любые предложения?

Источник
Другие вопросы по тегам