Home/ Questions/Q 7853277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T19:38:13+00:00

So after I animate some imgs or divs with javascript they no longer have

  • 0

So after I animate some imgs or divs with javascript they no longer have click or hover events available to them. (The imgs in question are the 4 big bubbles after they line up behind the “n”)

I’m sure this is a common problem that I just cant find the answer to. Thanks in advance!

Live Code: http://jboullion.com/nebuloid/index.html

Here are 3 different variations on my html divs

<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>

Here is my javascript
-brief version

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

Anyone know the answer?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the issue is that you are not hiding certain elements on your page via display:none but via opacity. So, these invisible elements are in front of your bubbles.

    For example, if i find the element $('#eb') and set its display to none in firebug, i can now hover over the first 2 bubbles.

    Also, you spelled the word ‘Copyright’ wrong 😛 maybe you should just replace it with &copy;

    something like this should fix it:

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

    You should also look into code reuse…

    • 0