jquery animate 후 이벤트가 더 이상 작동하지 않습니다.

Question

자바 스크립트로 일부 imgs 또는 div를 애니메이션 한 후에 더 이상 클릭 또는 호버 이벤트를 사용할 수 없습니다. 문제의 img는 "n"뒤의 4 개의 큰 거품입니다.

나는 이것이 답을 찾을 수없는 일반적인 문제라고 확신합니다. 미리 감사드립니다!

라이브 코드 : 여기 http://jboullion.com/nebuloid/index.html

내 html로 div의 다음

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

내 자바 스크립트 -brief 버전

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

사람은 답을 알고있다 3 개 다른 유사입니까?

Answer 1

문제는 사용자가 페이지의 특정 요소를 display : none하지만 opacity를 통해 숨기지 않는 것입니다. 따라서 이러한 보이지 않는 요소는 거품 앞에 있습니다.

예를 들어, 요소 $('#eb')을 찾고 해당 표시를 방화범 경고에서 none으로 설정하면 처음 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 
}}); 

또한 코드 재사용에 보일 것입니다. ..