jqueryのアニメーションの後にイベントが機能しなくなる

Question

JavaScriptまたはimgまたはdivをアニメーション化した後、クリックまたはホバーイベントを利用できなくなりました。 （問題のimgは、 "n"の後ろに並んだ後の4つの大きな泡です）

これは私がちょうど答えを見つけることができない共通の問題だと確信しています。前もって感謝します！

ライブコード：ここでhttp://jboullion.com/nebuloid/index.html

は私のhtmlのdivここ

<div > 
    <a href="javascript:link()"> <img id="bubbleOne" alt="Staff" src="images/smallbubble.png" /></a><br /> 
    </div> 
    <div> 
    <img id="bubbleTwo" onclick="link()" alt="Mission" src="images/smallbubble.png" /><br /> 
    </div> 
    <div> 
    <img id="bubbleThree" href="javascript:link()" alt="Games" src="images/smallbubble.png" /><br /> 
    </div> 

私のjavascriptの -briefバージョンが

$("#bubbleOne").click(function(event) 
    { 
    fadeLogo() 
    if (iOS == true) { 
     window.scroll(0,350); 
    } 
    $("#copy").html("<span id='purp'>WE ARE NEBULOID</span> <br/><br/>We want to make great video games.<br/> We want to stretch the boundaries that define what video gaming looks and feels like.<br/> We are new developers cutting our teeth, and we have very grand and exciting projects coming soon.<br/> Our biggest upcoming project is a subtle, human, and epic science fiction adventure."); 
    $("#mission").css("color","#8470FF"); 
    colorHoldM = "#8470FF"; 
    colorHoldG = "white"; 
    colorHoldS = "white"; 
    colorHoldC = "white"; 
    $("#games").css("color","white"); 
    $("#staff").css("color","white"); 
    $("#contact").css("color","white"); 
    }); 

$("#bubbleOne").hover(function(){ 
    $("#bubbleOne").animate({ 
    width: "175px"}, 500); 
    }); 

    $("#bubbleOne").mouseout(function(){ 
    $("#bubbleOne").animate({ 
    width: "110px"}, 500); 
    }); 

    function fadeLogo() 
    { 
     //stuff 
     $('#bubbleOne').delay(1000).animate({left: '+=120', top: '-=130' }, 1000); 
     $('#bubbleTwo').delay(1000).animate({left: '-=50', top: '-=130' }, 1500); 
     $('#bubbleThree').delay(1000).animate({left: '-=230', top: '-=165' }, 2000); 
    //stuff 
    } 

誰もが答えを知っている上、3種類のバリエーションがありますか？

Answer 1

問題は、ディスプレイ上で特定の要素が表示されていないことです：none、via opacity。したがって、これらの目に見えない要素があなたの泡の前にあります。

例えば、私が要素$('#eb')を見つけてfirebugの表示をnoneに設定した場合、最初の2つのバブルの上にカーソルを置くことができます。

また、あなたは、単語「著作権」間違ったスペル：Pは、多分あなたはそれを修正する必要があり、このような©

何かに置き換える必要があります。

var $shit = $('#eb,#u,#l,#oi,#d'); 
$shit.animate({opacity:0}, {duration: 1000, specialEasing:{duration: 1000, opacity:'easeInBounce'}, 'complete':function(){ 
    $shit.hide(); //function called when animation is complete. hide this shit 
}}); 

また、コードの再利用になっているはずです。 ..