Jquery 可见性切换不起作用

Question

只是一个简单的问题，有人可以告诉我哪里出了问题吗？我正在尝试切换类的可见性，但无法恢复其可见性。隐藏它很好：

if($(".ball").is(':visible') == true) { 
   $(".ball").css({ 'visibility': 'hidden'}); 
} else { 
    $(".ball").css({ 'visibility': 'visible'}); 
}

我不能使用切换，因为我需要保留该类但不被看到，切换会扰乱格式。

帮助会很好，谢谢。

Answer 1

选择器“:visible”不能与可见性一起使用，只能与显示一起使用。

这是 jQuery 文档的片段http://api.jquery.com/visible-selector/：

具有visibility:hidden或opacity:0的元素被认为是可见的，因为它们仍然占用布局中的空间。在隐藏元素的动画期间，该元素被认为是可见的，直到动画结束。在显示元素的动画期间，该元素被认为在动画开始时可见。

试试这个：

if($(".ball").css("visibility") == "visible") { 
    $(".ball").css({ 'visibility': 'hidden'}); 
} else { 
    $(".ball").css({ 'visibility': 'visible'}); 
}

这是一个示例 http://jsfiddle.net/eGVWM/2/

Answer 2

您可以选择具有 ball 类的所有元素，然后确定其隐藏位置：

$(".ball").each(function() {
    var ball = $(this);
    if (ball.css("visibility") === "hidden")
        ball.css("visibility", "visible");
    else
        ball.css("visibility", "hidden");
});

Answer 3

$(".ball").toggle(); 也会切换，但使用 display:none 进行操作。

Answer 4

if($(".ball").is(':visible') == true) { 
  $(".ball").hide();
 };

可能不是您想要的，但它会隐藏具有 'ball' 类的元素