0

因此，在我使用 javascript 为一些 img 或 div 设置动画后，它们不再具有可用的单击或悬停事件。（有问题的imgs是在“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

问题是您不是通过显示隐藏页面上的某些元素：无，而是通过不透明度。所以，这些看不见的元素就在你的泡泡面前。

例如，如果我$('#eb')在 firebug 中找到该元素并将其显示设置为无，我现在可以将鼠标悬停在前 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 回答