jquery动画后事件不再起作用

Question

因此，在我使用 javascript 为一些 imgs 或 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
    }

有人知道答案吗？

Answer 1

问题是您不是通过 display:none 而是通过 opacity 隐藏页面上的某些元素。所以，这些看不见的元素就在你的泡泡面前。

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

您还应该研究代码重用...