события перестают функционировать после jquery animate

Question

Итак, после того, как я подгоняю некоторые imgs или divs с javascript, у них больше нет доступных событий или событий наведения. (Соответствующие imgs являются 4 большими пузырьками после того, как они выстраиваются за «n»)

Я уверен, что это распространенная проблема, на которую я просто не могу найти ответ. Заранее спасибо!

Живая Код: http://jboullion.com/nebuloid/index.html

Вот 3 различные вариации на мой HTML дивы

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

Кто-нибудь знает ответ?

Answer 1

проблема заключается в том, что вы не скрываете определенные элементы на своей странице с помощью дисплея: нет, но через непрозрачность. Итак, эти невидимые элементы перед вашими пузырями.

Например, если я нахожу элемент $('#eb') и не устанавливаю его отображение в firebug, я могу навести курсор на первые два пузырька.

Кроме того, вы написали слово неправильно «Авторское право»: 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 
}}); 

Вы также должны смотреть на повторное использование кода. ..