Javascript 转换无法与rgba一起正常工作

我有一个项目在这里，我希望一个覆盖来的图片上方，当你点击一个链接，这样我们就可以阅读一些有关产品的信息。我想要的效果是这样的：

为了做到这一点，我有一个带有信息的div，在有图片的div中有一个白色背景，如下所示：

      <div id="leftWindow">
        <a href="notalink.html" id="infoButton">+ Information</a>
        <div id="info" class="notVisible">
          Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
        </div>
      </div>

#info {
    background-color: white;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.visibleIsh {
    opacity: .7;
}

当您单击链接时，一些javascript交换类：

$( document ).on('click', '#infoButton', function(e){
  e.preventDefault();
  $("#info").removeClass("notVisible").addClass("visibleIsh");

});

这是可行的，但问题是文本也会失去透明度，这是我不想要的。为了解决这个问题，我使用rgba而不是不透明，如下所示：

      <div id="leftWindow">
        <a href="notalink.html" id="infoButton">+ Information</a>
        <div id="info" class="notVisible">
          Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product Some information about this product
        </div>
      </div>

#info {
    background-color: white;
    transition: opacity 1.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 342px;
    height: 516px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
}

.visibleIsh {
    opacity: .7;
}

css:

---

我得到了你可以在gif中看到的童车行为。谢谢你的帮助。谢谢

目前您正在做的只是淡出背景色。使用这种方法，文本将始终可见。如果你想让它看起来像你的第一张gif，你应该先把背景不透明度设置为.7，然后隐藏整个

#info

元素。然后可以使用jQuery在单击时淡入整个元素

$（文档）。在（'click'，'infoButton'，函数（e）{
e、 预防默认值（）；
$（“#信息”）.fadeIn（1500）；
});
#信息{
显示：无；
背景色：rgba（255255.7）；
位置：绝对位置；
排名：0；
左：0；
宽度：342px；
高度：516px；
左侧填充：20px；
右边填充：20px；
填充顶部：10px；
}

关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息关于本产品的一些信息
我在第二张gif中没有看到任何错误。请解释这个问题。没有平滑过渡，字母表上没有7。如果我没记错的话，你不能直接对文本应用淡入淡出过渡-它不会过渡，而是在过渡超时时立即消失。你必须使包含文本的容器褪色。我认为问题在于你的
notVisible
类。您能提供完整的代码吗？因为这把小提琴（只隔离有问题的问题-转换）似乎在做您想要做的事情：。是否有机会将
display:none
更改为
display:block
？我认为OP希望使用CSS而不是JS进行转换。他们从未指定过这一点，而且他们已经在使用JS了。此外，这个问题被标记为
Javascript
和
jQuery
。看到他们在CSS中使用转换，你可以假设你知道他们是怎么说的。