0

最初に、私は Web デザイン、JS、およびこれらすべての初心者であることを覚えておいてください。どんな提案でも大歓迎です:)私はこのimgアイコン（serviceIcon）を特定のクラス（serviceHardware、...）で「絶対」に配置しています。

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

簡単です。マウスオーバーは、ホバーされていないアイテムの不透明度を変更し、ホバーされたアイテムのサイズを変更します。mouseleave は、すべてを以前の状態にアニメートします。クリックすると、クリックされた画像が隅にアニメーション化され、serviceIcon クラスを削除する必要があります (mouseover/mouseleave のトリガーを回避するためですよね?)。(例では) クリックされていない画像を下に移動し、クリックされたアイテムに 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

.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/）。

これは、少なくとも各アイコンを初めてクリックしたときに、完璧に機能します。その後、繰り返しクリックし始めると深刻な遅延に気づき、毎回長くなります。私にとっては、オンとオフを処理する時間のように思えますね。もう1つ考えられるのは、mouseenter / mouseleaveイベントのバインドを解除していないため、これがすべて同時に発生し続ける可能性があることです。何か疑惑はありますか？

于 2013-01-26T14:35:31.560 に答える
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 に答える