0

如何正确评估元素的“可见性”（松散地使用）？我熟悉 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/它说：

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

我在“if”语句中尝试了很多变化

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

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

EDIT2：所以在不理解Sam Tyson下面提供的内容之后（在这篇文章之前甚至没有听说过 jsFiddle），我开始在 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：对此的正确答案来自下面的布赖恩。我创建了自己的 jsFiddle来解决这个问题。为了解决这个问题，我转向Nil帮助我的聊天室：

NIL: if($('#preview1').css('opacity',0)) ← 这应该做什么？
BRIAN: 将它设置为不可见
NIL: 好的，为什么它在条件句中？

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

布赖恩，无，谢谢伙计们！

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

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

4

4 回答 4

3

.not() 从匹配元素集中移除元素。

你想要做的是使用“is()”函数：

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

见我的jsFiddle。

于 2012-04-14T01:04:54.460 回答
1

您可以更改条件：

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

jsfiddle 示例

于 2012-04-14T00:53:01.990 回答
0

你能检查一下这是否有效

if($('#preview1').css('display') == 'none')
于 2012-04-14T00:53:25.610 回答
0

如果我理解正确，你想说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();
    }
});
于 2012-04-14T00:56:01.880 回答