Javascript 过渡覆盖和不透明度

Question

我正在使用此叠加层作为搜索功能，并且从 javascript 中可以看出，叠加层从左侧显示：

HTML：

<span style="cursor:pointer" onclick="openNav()"><img class="logo" src="_themes/englishclass/img/searchsmall.png" onerror="this.onerror=null; this.src='img/global/logo.png'" alt="searchsite" /></span>

     <!-- The overlay -->
    <div id="myNav" class="overlay">

      <!-- Button to close the overlay navigation -->
        <span class="closebtn" style="cursor:pointer" onclick="closeNav()">×</span>

      <!-- Overlay content -->
      <div class="overlay-content">
         <form id="searchbox" id="searchbox_015532613638252232237:nvc8fxndlgb" action="http://englishclass.dk/pages/results.html" autocomplete="off">
      <input value="015532613638252232237:nvc8fxndlgb" name="cx" type="hidden"/>
      <input id="q" name="q" size="70" type="text" id="search" placeholder="Search the English Class Website..."/>
      <input value="Search" name="sa" autofocus type="submit" id="submit" style="background-image: url('../_themes/englishclass/img/searchsmall.png')";/></form><span class="sexy_line"></span> 

          </div></div>

CSS：

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 0%;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

JS：

 /*/ SEARCH OVERLAY /*/ 

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

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

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

Answer 1

在您的 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"));
}

如果您想使用 jquery ，请删除 onload 属性并将 closeButton 和 searchButton id 添加到标签。

$(document).ready(function(){
  $("#closeButton").click(function(){
      $("#myNav").fadeOut();
  });

  $("#searchButton").click(function(){
      $("#myNav").fadeIn();
  });
  
});

/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 100%;
  display:none;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span id="searchButton" style="cursor:pointer">
  <img class="logo" src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/search-64.png" onerror="this.onerror=null; this.src='img/global/logo.png'" alt="searchsite" />
</span>

<!-- The overlay -->
<div id="myNav" class="overlay">

    <!-- Button to close the overlay navigation -->
    <span class="closebtn" style="cursor:pointer" id="closeButton">×</span>

    <!-- Overlay content -->
    <div class="overlay-content">
        <form id="searchbox" action="http://englishclass.dk/pages/results.html" autocomplete="off">
            <input value="015532613638252232237:nvc8fxndlgb" name="cx" type="hidden" />
            <input id="q" name="q" size="70" type="text" placeholder="Search the English Class Website..." />
            <input value="Search" name="sa" autofocus type="submit" id="submit" style="background-image: url('../_themes/englishclass/img/searchsmall.png')" ;/>
        </form><span class="sexy_line"></span>

    </div>
</div>

希望我的回复对你有帮助。

Answer 2

通过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");
}

Answer 3

试试这个

css

/* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 100%;
    display: none;
    position: fixed; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.85); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: all 0.5s; /* 0.5 second transition effect to slide in or slide down the 
    overlay (height or width, depending on reveal) */

}

JS

/* 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";
}