Question

首先请记住，我是网页设计的新手，JS和所有这些，请。任何建议将不胜感激:) 我有这个img图标（serviceIcon）与他们的特定类（serviceHardware，...）定位'绝对'。

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

这很简单：mouseover会改变不悬停的项目中的不透明度并调整悬停的项目的大小; 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会一直触发与serviceIcon类相对应的mouseover / mouseleave事件（点击时已经删除），如果你检查元素，你会看到它没有'有了serviceIcon类。我在这做错了什么？可能都是？ IDK的。

实际上，它添加了serviceSelected类，但如果单击它，则永远不会触发此类的click事件。奇怪的。我在firefox和safari中测试了这个并且两者都表现相同。

我在serviceItem的click事件中添加了额外的验证代码检查，看它是否有serviceSelected类，根本不是LOGICAL。即使它有效，我也拒绝使用它！谢谢！

编辑：关于mouseover / 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);
});

Answer 1

取消绑定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);
            });

Answer 2

在阅读.on（）和.off（）后，我对代码进行了一些更改，似乎有效。我创建了两个函数：

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

基本上，它们包含serviceIcon和serviceSelected类的click事件的代码。正如您向我展示的那样，当我单击一个serviceIcon，取消绑定它时，我关闭了“click”事件，然后我打开（绑定）了使用函数restoreIcons（）处理的serviceSelected类的“click”事件。

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函数内部，我关闭了serviceSelected的“click”事件，并再次启用了serviceIcon的“click”事件（由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事件的绑定，所以可能会同时发生这种情况。任何sugestions？

jquery removeClass'works'，但类的效果仍在继续

2 个答案: