Javascript转换覆盖&；不透明度

我将此覆盖用于搜索功能，覆盖显示在左侧，从javascript可以看出：

HTML:

JS:

---

我想创建一个淡入。我尝试将其更改为style.opacity=“1”和“0”。但它不起作用。我该如何创建淡入淡出（0.5s左右的过渡），而不是像现在这样从左侧滑入

通过css的这种方法试试看

在css中

myNav {
    opacity: 0;
    transition: all 0.5s;
}
myNav.active {
    opacity: 1;
}

这是用JavaScript编写的

function openNav() {
  document.getElementById("myNav").classList.add("active");
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").classList.remove("active");
}

---

通过css的这种方法试试看

在css中

myNav {
    opacity: 0;
    transition: all 0.5s;
}
myNav.active {
    opacity: 1;
}

这是用JavaScript编写的

function openNav() {
  document.getElementById("myNav").classList.add("active");
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").classList.remove("active");
}

试试这个

css }

JS 试试这个

css }

JS

---

在css中，将

width

属性更改为

100%

，并使用

none

值添加

display

属性，然后删除

transition

属性

然后，如果要使用javascript，请尝试以下代码：

function fadeIn(fadeTarget) {
    var op = 0.01;
        fadeTarget.style.opacity = op;
    fadeTarget.style.display = 'block';
    var fadeEffect = setInterval(function () {
        fadeTarget.style.opacity = op;
        if (op < 1) {
            op += 0.01;
            fadeTarget.style.opacity = op;
        } else {
            clearInterval(fadeEffect);
        }
    }, 10);
}
function fadeOut(fadeTarget) {
      var op = 1;
    fadeTarget.style.opacity = op;
    var fadeEffect = setInterval(function () {
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.01;
        } else {
            clearInterval(fadeEffect);
            fadeTarget.style.display = 'none';
        }
    }, 10);
}
function openNav() {
  fadeIn(document.getElementById("myNav"));
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  fadeOut(document.getElementById("myNav"));
}

/*覆盖（背景）*/
.覆盖{
/*高度和宽度取决于您想要显示覆盖的方式（请参见下面的JS）*/
身高：100%；
宽度：100%；
显示：无；
位置：固定；/*保持原位*/
z索引：999；/*位于顶部*/
左：0；
排名：0；
背景色：rgb（0,0,0）；/*黑色后备色*/
背景色：rgba（0,0,0,0.85）；/*黑色w/不透明度*/
溢出-x:隐藏；/*禁用水平滚动*/
}

×

在css中将

宽度

属性更改为

100%

，并使用

none

值添加

显示

属性，并删除

转换

属性

然后，如果要使用javascript，请尝试以下代码：

function fadeIn(fadeTarget) {
    var op = 0.01;
        fadeTarget.style.opacity = op;
    fadeTarget.style.display = 'block';
    var fadeEffect = setInterval(function () {
        fadeTarget.style.opacity = op;
        if (op < 1) {
            op += 0.01;
            fadeTarget.style.opacity = op;
        } else {
            clearInterval(fadeEffect);
        }
    }, 10);
}
function fadeOut(fadeTarget) {
      var op = 1;
    fadeTarget.style.opacity = op;
    var fadeEffect = setInterval(function () {
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.01;
        } else {
            clearInterval(fadeEffect);
            fadeTarget.style.display = 'none';
        }
    }, 10);
}
function openNav() {
  fadeIn(document.getElementById("myNav"));
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  fadeOut(document.getElementById("myNav"));
}

/*覆盖（背景）*/
.覆盖{
/*高度和宽度取决于您想要显示覆盖的方式（请参见下面的JS）*/
身高：100%；
宽度：100%；
显示：无；
位置：固定；/*保持原位*/
z索引：999；/*位于顶部*/
左：0；
排名：0；
背景色：rgb（0,0,0）；/*黑色后备色*/
背景色：rgba（0,0,0,0.85）；/*黑色w/不透明度*/
溢出-x:隐藏；/*禁用水平滚动*/
}

×

你说它不工作是什么意思？您的样式表可能会将元素的宽度设置为

0

，因此请确保首先将其设置为100%。将CSS添加到问题中，这将有助于解决您的问题。我已使用CSS进行了更新。关于将宽度设置为100%，您是对的，但是如果我这样做，覆盖层不会在单击时显示，而是始终可见。我该怎么防止呢？你说它不起作用是什么意思？您的样式表可能会将元素的宽度设置为

0

，因此请确保首先将其设置为100%。将CSS添加到问题中，这将有助于解决您的问题。我已使用CSS进行了更新。关于将宽度设置为100%，您是对的，但是如果我这样做，覆盖层不会在单击时显示，而是始终可见。如何防止这种情况发生？这会使叠加在单击时立即显示。我可以用不透明度淡入吗？是的，你可以用不透明度。我怎么做？如果我删除style.display和insert style.opacity，代码将不再工作：（我在第一次单击run（运行）按钮时使用了它，该按钮使叠加在单击时立即显示。我可以使用opacity（不透明度）将其淡入淡出吗？是的，您可以使用opacity（不透明度）。我将如何操作？如果我删除style.display和insert style.opacity（不透明度），代码将不再工作：（我首先点击run（运行）按钮

/* Open when someone clicks on the span element */
function openNav() {
  document.getElementById("myNav").style.display = "block";
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  document.getElementById("myNav").style.display = "none";
}

function fadeIn(fadeTarget) {
    var op = 0.01;
        fadeTarget.style.opacity = op;
    fadeTarget.style.display = 'block';
    var fadeEffect = setInterval(function () {
        fadeTarget.style.opacity = op;
        if (op < 1) {
            op += 0.01;
            fadeTarget.style.opacity = op;
        } else {
            clearInterval(fadeEffect);
        }
    }, 10);
}
function fadeOut(fadeTarget) {
      var op = 1;
    fadeTarget.style.opacity = op;
    var fadeEffect = setInterval(function () {
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.01;
        } else {
            clearInterval(fadeEffect);
            fadeTarget.style.display = 'none';
        }
    }, 10);
}
function openNav() {
  fadeIn(document.getElementById("myNav"));
}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav() {
  fadeOut(document.getElementById("myNav"));
}