title: is(:visible) selector not working on class jQuery
body: <p>Not sure how to explain this, I made a fiddle of what I'm attempting to do:
  <a href="http://jsfiddle.net/x2btM/9/" rel="nofollow">http://jsfiddle.net/x2btM/9/</a></p>
  
  <p>here's my code:
  HTML:</p>
  
  <pre><code>&lt;div id="ZodOneDragBox"&gt;
      &lt;div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;"&gt;
          &lt;img src="some.jpg"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="ZodTwoDragBox"&gt;
      &lt;div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;"&gt;
          &lt;img src="some.jpg" width="45" height="45"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="aquariusIcnClick" class="iconClicker"&gt;
          &lt;img src="some_Icon.jpg" width="45" height="45"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my jquery:</p>
  
  <pre><code>if ($('.killSelectedComp1').is(':visible')) {
      //--SELECT BOX TWO
      $('#aquariusIcnClick').click(function() {
          $('.killSelectedComp2').hide();
          $('#aquariusSelectedComp2').show();
      });
  
  
  }
  else {
      //--SELECT BOX ONE
      $('#aquariusIcnClick').click(function() {
          $('.killSelectedComp1').hide();
          $('#aquariusSelectedComp1').show();
      });
  
  }​
  </code></pre>
  
  <p>Basically when you click on <code>aquariusIcnClick</code> the image <code>aquariusSelectedComp1</code> will appear in div <code>ZodOneDragBox</code>. <code>aquariusSelectedComp1</code> with the class of <code>killSelectedComp1</code> is now visible, so when you click on the icon <code>aquariusIcnClick</code> again, the image should appear in <code>ZodTwoDragBox</code>. It works for the first box, but the selector is not reading that the image with the corresponding class is currently visible therefor executing what's in the <code>if</code> statement and showing the image in the second box. Hope I explained this well enough, once again, here's my fiddle: </p>
  
  <p><a href="http://jsfiddle.net/x2btM/9/" rel="nofollow">http://jsfiddle.net/x2btM/9/</a></p>
  
  <p>Not sure what I'm doing wrong, I've googled to make sure that I'm using the <code>:visible</code> selector correctly any and all help is very much appreciated. Thank you
  ​</p>