Question

我正在尝试切换链接控件的不透明度，方法是使用“：visible”选择器检查它打开/关闭的元素是否可见。我有以下标记： -

<div class='btns'></div>
<p class='text'>Hello world</p>

使用这个jQuery： -

var text = $('.text');
text.hide();
var btn = $('<a>', {
    '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);

第一次点击链接时，链接会正确淡化到一半不透明度，但随后的点击次数不会改变不透明度。您可以在jsFiddle上看到这一点。

为什么“：visible”选择器会在进一步点击时失败？有更好的方法吗？

道歉，如果这已经在这里得到解答，但我无法找到我特定问题的答案。

Answer 1

我认为你必须改变：

var opacity = text.is(':visible').length ? 1 : .5;

到

var opacity = $('.btns').css('opacity')==0.5 ? 1 : 0.5;

Answer 2

如果你真的想测试文本的属性，你可以这样做：

var opacity = text.css('display') == 'none' ? .5 : 1;
text.slideToggle();

请务必先测试之前开始设置动画，因为动画时显示屏永远不会为“无”。

为了更好地了解要测试的属性，我建议你（如果你使用chrome），右键单击动画文本，检查元素，然后在激活切换时刻意地观察正在更改哪些样式参数。

在动态元素上使用jQuery“：visible”选择器

2 个答案: