1

我试图通过检查它打开/关闭的元素是否可见或不使用“：可见”选择器来切换链接控件的不透明度。我有以下标记：-

<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" 选择器在进一步点击时会失败？有更好的方法吗？

如果这里已经回答了这个问题，我深表歉意，但我无法找到我的特定问题的答案。

4

2 回答 2

1

我认为你必须改变：

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

到

var opacity = $('.btns').css('opacity')==0.5 ? 1 : 0.5;
于 2012-11-19T15:56:32.630 回答
1

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

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

请务必在开始制作动画之前进行测试，因为在制作动画时显示永远不会是“无”。

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

于 2012-11-19T16:55:37.893 回答