javascript - 如何正确评估 "if"语句的元素可见性\不透明度\隐藏度

Question

如何正确评估元素的“可见性”(宽松使用)？我熟悉 hide、show、fade、fadeToggle .opacity 以及其他一些功能，但评估让我感到困惑。

目标是更新由对表单元素的任何更改触发的 DIV 中的文本(即 $('input').change() )。 DIV 中的文本源自表单上的每个 <input> 元素。如果用户选择修改元素，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/其中说:

"Elements with visibility: hidden or opacity: 0 are considered visible, since they still consume space in the layout."

我在“if”语句中尝试了太多多种变体

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

EDIT1:将“if”评估更改为“.is”，而不是我最初发布的(.not)，这给人留下了错误的印象。新手帖子错误。

编辑2:所以在不明白什么之后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)) ← What is this supposed to do?
BRIAN: Sets it to invisible
NIL: Ok, why's it in a conditional?

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

布莱恩、尼尔，谢谢你们!

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 .