Using jQuery ":visible" selector on dynamic element
<p>I'm attempting to toggle the opacity of a link control by checking if the element it toggles on/off is visible or not using the ":visible" selector. I have the following markup:-</p>

<pre><code>&lt;div class='btns'&gt;&lt;/div&gt;
&lt;p class='text'&gt;Hello world&lt;/p&gt;
</code></pre>

<p>With this jQuery:-</p>

<pre><code>var text = $('.text');
text.hide();
var btn = $('&lt;a&gt;', {
    'href': '#',
    'text': 'click me',
    'click': function(e){
        e.preventDefault();
        text.slideToggle();
        var opacity = text.is(':visible').length ? 1 : .5;
        $('.btns').animate({
            'opacity': opacity
        });
    }
});

$('.btns').append(btn);
</code></pre>

<p>The first time the link is clicked the link fades to half opacity correctly, but then the opacity doesn't change on subsequent clicks. You can see this in action on <a href="http://jsfiddle.net/agkF7/" rel="nofollow">jsFiddle</a>.</p>

<p>Why does the ":visible" selector fail on further clicks? Is there a better approach to this?</p>

<p>Apologises if this has already been answered on here, but I've not been able to find an answer to my particular question. </p>
