0

そのため、javascript を使用して一部の img または div をアニメーション化した後、クリックまたはホバー イベントを使用できなくなりました。（問題の画像は、「n」の後ろに並んだ後の4つの大きな泡です）

これは、答えが見つからない一般的な問題だと確信しています。前もって感謝します！

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

ここに私のhtml divの3つの異なるバリエーションがあります

<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 です-簡単なバージョン

$("#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
    }

誰も答えを知っていますか？

4

1 に答える 1

0

問題は、display：noneを介してページ上の特定の要素を非表示にしておらず、不透明度を介して非表示にしていることです。したがって、これらの目に見えない要素はあなたの泡の前にあります。

たとえば、$('#eb')firebugで要素を見つけてその表示をnoneに設定すると、最初の2つのバブルにカーソルを合わせることができます。

また、あなたは「著作権」という単語のスペルを間違えました：P多分あなたはそれを単に置き換える必要があります&copy;

このようなものはそれを修正する必要があります：

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
}});

コードの再利用も検討する必要があります...

于 2012-04-25T03:11:38.513 に答える