title: jQuery/javascript if-statement with css values
body: <p>I'm slightly new to the if statements and I'm working on an animation where:</p>
  
  <p>If <code>&lt;div id="headlights"&gt;</code> displays "none" in the css (which is constantly fading in and out), I want <code>&lt;div id="speech-bubble-dark"&gt;</code> to fade in. </p>
  
  <p>And when the <code>&lt;div id="headlights"&gt;</code> displays "block" in the css, I want <code>&lt;div id="speech-bubble-sun"&gt;</code> to fade in.</p>
  
  <pre><code>function bubbleTest(){
  if($("#headlights").css("display") == "none" ) {
      $("#speech-bubble").fadeOut('600');
      $("#speech-bubble-sun").fadeOut('600', function(){
          $("#speech-bubble-dark").fadeIn('600');
      });
  
  }   else{
          $("#speech-bubble").fadeOut('600');
          $("#speech-bubble-dark").fadeOut('600', function(){
              $("#speech-bubble-sun").fadeIn('600');              
          });
  
      }
  }
  </code></pre>
  
  <p>I've tested it and the fades do not work, and dependent on the display condition being "none" or "block" it displays a different div. </p>
  
  <p>What would you suggest I do?</p>