Question

如何正确评估元素的“可见性”（松散地使用）？我熟悉hide，show，fade，fadeToggle .opacity，以及其他一些功能，但这是评估，我很难过。

目标是更新由表单元素的任何更改触发的DIV中的文本（即$（'input'）。change（））。 DIV中的文本来自＆lt; input＆gt;中的每一个。表格上的元素。如果用户选择修改元素，则DIV文本将使用新值进行更新。但是，我试图让文本逐渐从当前字符串变为更新后的字符串。（还记得使用两台投影机从一张图片淡入下一张图片的互联网前“幻灯片”吗？）

为了达到这个目的，我想我需要2个DIV，一个在另一个之上。当＃preview1逐渐消失时，＃preview2将随着更新的文本而消失。

所以我尝试了类似于此（简化）的东西，但只有fadeIn（）有效。 “别的”永远不会确定。

$("input").change(function(){
    if($('#preview1').is(':visible'))
    //if($('#preview1').css('opacity',1))
    {
        $('#preview1').fadeOut();
        fnBuildPrev('#preview2');
        $('#preview2').fadeIn();
    }
    else
    {
        $('#preview2').fadeOut();
        fnBuildPrev('#preview1');
        $('#preview1').fadeIn();
    }
});

然后我发现了这个：http://api.jquery.com/visible-selector/说：

“具有可见性的元素：隐藏或不透明度：0被认为是可见的，因为它们仍占用布局中的空间。”

我在“if”语句

中尝试了很多变种 soooo

我应该使用什么来进行正确的条件评估？

EDIT1：将“if”评估更改为“.is”而不是我最初发布的（.not）给出了错误的印象。新秀发布错误。

EDIT2：所以在不理解下面提到的Sam Tyson之后（在这篇帖子之前甚至没有听说过jsFiddle），我开始用his recommendations in jsFiddle进行编辑。

我简化了脚本以更好地隔离确切的问题。

我将他的示例中的javascript更改为以下内容：

$("input").click(function(){
    if($('#preview1').css('opacity',0))
    {
        $('#preview1').css('opacity',1);
    }
    else
    {
        $('#preview1').css('opacity',0);
    }
});

并将＃preview1的CSS更改为以下内容：

#preview1 {
    border: 1pt solid blue;
    opacity: 0;
}

据我所知，我遇到的真正问题是从未到达 else 。因此，＃preview1的不透明度实际上会在第一次单击时返回“0”。但是，第二次单击不会更改不透明度。我在else语句中尝试了一些元素修改，但它从未运行过。

EDIT3：对此的正确答案来自Brian以下。我创建了my own jsFiddle以解决这个问题。我痴迷于修复它，我转向Nil帮助我的聊天室：

NIL：if（$（'＃preview1'）。css（'opacity'，0））←这应该做什么？
BRIAN：将其设置为不可见的 NIL：好的，为什么它是有条件的？

我在if语句中使用了一个方法，而不是检查属性的值。这是对任何语言都是新手的试验。检查我的jsFiddle的工作版本。

Brian，Nil，谢谢老兄！

http://jsfiddle.net/brianckelley/7QLK3/8/

编辑4：Sam给了我在jsFiddle中修改的基本代码。谢谢你！

Answer 1

.not（）从匹配元素集中删除元素。

您要做的是使用“is（）”功能：

$("input").click(function(){
  if($('#preview1').is(':visible')) {
      $('#preview1').fadeOut();
      fnBuildPrev('#preview2');
      $('#preview2').fadeIn();
  }
  else
  {
      $('#preview2').fadeOut();
      fnBuildPrev('#preview1');
      $('#preview1').fadeIn();
  }
});

查看我的jsFiddle。

Answer 2

您可以更改条件：

if($('div').css('opacity') == 0){
    // do whatever
}

jsfiddle example

Answer 3

你能检查一下这是否有效

if($('#preview1').css('display') == 'none')

Answer 4

如果我理解正确，您想说visibility: hidden应该返回false而opacity:0也应该返回false。

请自行检查评估。创建一个检查每个

的方法

    $.fn.isTrulyNotVisible = function() { // silly name :P

        var $this = $(this);
        return !$this.is(':visible') || 
               $this.css('visibility') === 'hidden' || 
               !parseInt($this.css('opacity'), 10);
    };

http://jsfiddle.net/KAbPx/1/

$("input").change(function(){
    if($('#preview1').isTrulyNotVisible())

    {
        $('#preview1').fadeOut();
        fnBuildPrev('#preview2');
        $('#preview2').fadeIn();
    }
    else
    {
        $('#preview2').fadeOut();
        fnBuildPrev('#preview1');
        $('#preview1').fadeIn();
    }
});

如何正确评估“if”语句的元素visibility \ opacity \ hiddeness

4 个答案: