0

首先请记住，我是网页设计、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 不断触发对应于 serviceIcon 类的 mouseover/mouseleave 事件（单击时已删除），如果您检查元素，您将看到它不再有 serviceIcon 类了。我在这里做错了什么？可能是全部？身份证。

实际上，它添加了 serviceSelected 类，但是如果单击它，则永远不会触发该类的单击事件。奇怪的。我已经在 Firefox 和 safari 中对此进行了测试，并且两者的行为都相同。

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

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

2 回答 2

0

取消绑定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);
            });
于 2013-01-25T17:46:59.007 回答
0

在阅读了 .on() 和 .off() 之后，我对代码进行了一些更改，它似乎可以工作。我创建了 2 个函数：

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

基本上，它们包含 serviceIcon 和 serviceSelected 类的单击事件的代码。正如您向我展示的那样，当我单击 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 事件的绑定，所以这可能会同时发生。有什么建议吗？

于 2013-01-26T14:35:31.560 回答