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

我试图通过检查它打开/关闭的元素是否可见或使用“：visible”选择器来切换链接控件的不透明度。我有以下的标记： -在动态元素上使用jQuery“：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”选择器在进一步点击时失败？有没有更好的方法呢？

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

来源

2012-11-19 drmonkeyninja

.is（）返回一个布尔值，所以var opacity = text.is（'：visible'）。length？ 1：.5;应该是var opacity = text.is（'：visible'）？ 1：.5; – sroes

这就是我的想法，但只是使用text.is（'：可见'）根本没有工作！ – drmonkeyninja

因为文本总是可见的..你总是在设置“不透明度”之前滑动窗口 - 这意味着文本总是可见的..你必须捕捉不透明度，然后再开始slidetoggling或在slidetoggle的回调内 –

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

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

一定要测试之前你开始动画，因为显示永远不会是“无”同时动画。

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

来源

2012-11-19 16:55:37 lionroots

这工作谢谢。虽然我坚持查看可见性： - var opacity = text.is（'：visible'）？ 1：.5; – drmonkeyninja

我认为你必须改变：

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

到

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

来源

2012-11-19 15:56:32 Tchiize

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

回答

相关问题