jQuery detect if an element is visible
<p>Using <code>.fadeIn()</code> and <code>.fadeOut()</code>, I have been hiding/showing an element on my page, but with two buttons, one for hide and one for show. I now want to have one button to toggle both. Therefore, my question is how do I detect if the element is visible or not?</p>

<p>My HTML as it is:</p>

<pre><code>&lt;a onclick="showTestElement()"&gt;Show&lt;/a&gt;
&lt;a onclick="hideTestElement()"&gt;Hide&lt;/a&gt;
</code></pre>

<p>My JS as it is:</p>

<pre><code>&lt;script&gt;
    function showTestElement(){
        $('#testElement').fadeIn('fast');
    }

    function hideTestElement(){
        $('#testElement').fadeOut('fast');
    }
&lt;/script&gt;
</code></pre>

<p>My HTML as I would like to have it:</p>

<pre><code>&lt;a onclick="toggleTestElement()"&gt;Show/Hide&lt;/a&gt;
</code></pre>

<p>My JS as  I would like to have it, although pure jQuery would be nice:</p>

<pre><code>&lt;script&gt;
    function toggleTestElement(){
        if (document.getElementById('testElement').***IS_VISIBLE***) {
            $('#testElement').fadeOut('fast');
        }
        else{
            $('#testElement').fadeIn('fast');
        }
    }
&lt;/script&gt;
</code></pre>

<p>Any help gratefully received..</p>
