How do I properly evaluate an elements visibility \ opacity \ hiddeness for an "if" statement
<p>How do I properly evaluate the "visibility" (used loosely) of an element? I'm familiar with hide, show, fade, fadeToggle .opacity, as well as some of the other functions, but It's the <em>evaluation</em> where I'm stumped.</p>

<p>The goal is to update text in a DIV triggered by any change to a form element (i.e. $('input').change() ). The text in the DIV is derived from each of the &lt;input&gt; elements on a form. Should the user chose to modify an element, the DIV text would update with the new value. However, I'm trying to get the text to change gradually from whatever the current string is, to the updated string. (<em>remember pre-Internet "slideshows" that used two projectors to fade from one image to the next?</em>)</p>

<p>To achieve this, I figured I needed 2 DIVs, one on top of the other. While #preview1 was fading out, #preview2 would be fading in with the updated text.</p>

<p>So I tried something similar to this (simplified), but only the fadeIn() works. The "else" is never determined.</p>

<pre><code>$("input").change(function(){
    if($('#preview1').is(':visible'))
    //if($('#preview1').css('opacity',1))
    {
        $('#preview1').fadeOut();
        fnBuildPrev('#preview2');
        $('#preview2').fadeIn();
    }
    else
    {
        $('#preview2').fadeOut();
        fnBuildPrev('#preview1');
        $('#preview1').fadeIn();
    }
});
</code></pre>

<p>Then I found this: <a href="http://api.jquery.com/visible-selector/" rel="nofollow">http://api.jquery.com/visible-selector/</a> which says:</p>

<blockquote>
  <p>"<em>Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout.</em>"</p>
</blockquote>

<p>I've tried <em>soooo</em> many variations in my "if" statement</p>

<p>What should I be using for a correct conditional evaluation?</p>

<p>EDIT1: changed the "if" evaluation to ".is" instead of what I originally posted (.not) which gave the wrong impression. Rookie post mistake.</p>

<p>EDIT2: So after not understanding what <a href="http://stackoverflow.com/users/194044/sam-tyson">Sam Tyson</a> offered below (Hadn't even heard of jsFiddle until this post), I started monkeying with <a href="http://jsfiddle.net/styson/m6MQj/3/" rel="nofollow">his recommendations in jsFiddle</a>. </p>

<p>I simplified the script to isolate the exact problem a bit better.</p>

<p>I changed the javascript in his example to the following:</p>

<pre><code>$("input").click(function(){
    if($('#preview1').css('opacity',0))
    {
        $('#preview1').css('opacity',1);
    }
    else
    {
        $('#preview1').css('opacity',0);
    }
});
</code></pre>

<p>and changed the CSS for #preview1 to the following:</p>

<pre><code>#preview1 {
    border: 1pt solid blue;
    opacity: 0;
}
</code></pre>

<p>From what I can tell, the real problem I'm having is that the <em>else</em> is never reached. So the opacity for #preview1 will in fact return "0" on the first click. The second click, however, doesn't change the opacity. I've tried a number of element modifications inside the else statement, but it never runs.</p>

<p>EDIT3: The correct answer to this was from <a href="http://stackoverflow.com/users/450941/brian-flanagan">Brian</a> below. I created <a href="http://jsfiddle.net/brianckelley/7QLK3/8/" rel="nofollow">my own jsFiddle</a> to mess around with this. Feeding my obsession to fix it, I turned to the chat rooms where <a href="http://chat.stackoverflow.com/users/457812/nil">Nil</a> helped me:</p>

<blockquote>
  <p>NIL: if($('#preview1').css('opacity',0)) ← What is this supposed to do?<BR>
  BRIAN: Sets it to invisible<BR>
  NIL: Ok, why's it in a conditional?<BR></p>
</blockquote>

<p>I was using a method in my if statement instead of checking the value of a property. Such are the trials of being new to any language. Check my jsFiddle for the working version.</p>

<p>Brian, Nil, Thanks dudes!</p>

<p><a href="http://jsfiddle.net/brianckelley/7QLK3/8/" rel="nofollow">http://jsfiddle.net/brianckelley/7QLK3/8/</a></p>

<p>EDIT 4: Sam gave me the base code that I modified in jsFiddle. Thanks man!</p>
