Question

因此，在使用javascript为一些imgs或div设置动画后，他们不再拥有可用的点击或悬停事件。（有问题的imgs是排在“n”后面的四大气泡）

我确信这是一个常见的问题，我无法找到答案。提前谢谢！

直播代码：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但是通过不透明度隐藏页面上的某些元素。所以，这些看不见的元素就在你的泡泡面前。

例如，如果我找到元素$('#eb')并在firebug中将其显示设置为none，我现在可以将鼠标悬停在前2个气泡上。

替换它

这样的事情应该解决它：

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

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

jquery动画后事件不再起作用

1 个答案: