Question

我现在一直在努力解决这个问题，而且我确定它的事情非常明显，所以我希望其他人会发现我的错误，因为我只是避难所。我有更多的想法。

在Jquery函数的一个非常简化的版本中，我有以下内容;

Jquery功能

if(!$('#map-postcode').css("opacity") == 1){
    //Do some stuff first..
    //Then change the css opacity of the element   
    $('#map-postcode').animate({opacity: 0},2000, 'linear');
}else{
    //Then change the css opacity of the element   
    $('#map-postcode').animate({opacity: 1},2000, 'linear');
};

的 HTML

<input type="text" placeholder="Enter your postcode" id="map-postcode"/>
<input type="button" value="Get Directions" id="place-directions"/>

FYI。该功能通过＆＃39; onclick＆＃39;来调用。按钮

我知道函数调用有效，因为文本输入确实消失了。但它永远不会回来，并且通过向if / else的双方添加警报，我知道初始if(!$('#map-postcode').css("opacity") == 1)总是返回true。

有人可以解释为什么将不透明度设置为1然后导致函数 else 代码块被执行。

更重要的是，有没有更好的方法来检查不透明度。

为了防止人们想知道，我不想使用fadeToggle（）等因为我希望元素保持可见＆＃39; （也就是说，周围元素的布局为不改变），我想要淡入/淡出效果（因此使用不透明度动画）。除非有更优雅的方式来实现这个目标吗？

Answer 1

以下代码适用于我，

$("#place-directions").click(function(){
    if($('#map-postcode').css("opacity") == 1){
        //Do some stuff first..
        //Then change the css opacity of the element   
        $('#map-postcode').animate({opacity: 0},2000, 'linear');
    }
    else{
        //Then change the css opacity of the element   
        $('#map-postcode').animate({opacity: 1},2000, 'linear');
    };
});

我想，你在表达式之前放置的!运算符会产生问题。

或者，您可以使用toggleClass()功能点击，如下所示

$("#place-directions").click(function(){
    $("#map-postcode").toggleClass("fadeIt");
});

并在CSS中定义如下，

.fadeIt{
    opacity: 0;
}
#map-postcode{
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}

Answer 2

检查opacity就好了。问题是css('opacity')会返回一个字符串值，您将使用not（!）运算符：

!$('#map-postcode').css("opacity")

!0等于true，!1等于false。

但是，!'0'和!'1'都等于false。

即使更正了，您的逻辑也可能存在问题：

if opacity is not 1, then animate opacity to 0;
else animate opacity to 1.

如果opacity为0，则opacity将设置为0。

如果opacity为1，则opacity将动画为1。

删除not（!）运算符会使动画发生。

如果值已动态更改，则检查元素不透明度的Jquery函数将失败

2 个答案: