如何使用带按钮的JavaScript淡出文本

Question

我已经有了按钮的功能，但我无法弄清楚我需要添加什么才能让它淡入

myFunction = () => {
var x = document.getElementById("myDIV");
if (x.style.display === "none") {
x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

我是否需要制作新功能，还是可以将其添加到现有功能中？ 这是我的CSS

 opacity: 1;
  transition: 0.7s opacity;
}

#h3.fade {
    opacity: 0;
    transition: none;
}

您可以看到整个代码here。

Answer 1

你的问题是你正在移除转换，所以它导致它不转换，但只是跳转。保持转换的整个时间，只需更改不透明度：

const target = document.querySelector('#target');
document.querySelector('button').addEventListener('click', () => {
  target.classList.contains('fade') 
    ? target.classList.remove('fade') 
    : target.classList.add('fade');
});

#target {
  transition: 1s opacity;
  opacity: 1;
  width: 100px;
  height: 50px;
  background: #F00;
}

#target.fade {
  opacity: 0;
}

<div id="target"></div>
<button>Toggle</button>

Answer 2

使用下面给出的fadeIn()和fadeOut()函数。

＆＃13;

＆＃13;

myFunction = () => {
        var x = document.getElementById("myDIV");
        if (x.style.display === "none") {
          $("#myDIV").fadeIn();
        } else {          
          $("#myDIV").fadeOut();
        }
      }

＆＃13;

.button-holder {
  position: absolute;
  margin: auto;
  height: 25px;
  top: 260px;
  left: 0;
  width:100%;
  text-align: center;
}

.Box {
  position: relative;
  margin: auto;
  display: block;
  border: solid 4px skyBlue;
  margin-top: 2%;
  width: 600px;
  height: 450px;
  background: none;
  z-index: -1
}

.tittle {
  text-align: center;
  font-family: 'courier new', Courier, monospace;
}

.speech-buble-top {
  position: relative;
  display: block;
  border: solid 4px black;
  top: -15%;
  left: ;
  width: 200px;
  height: 100px;
  background: white;
  border-radius: 50%;
  text-align: center
}

#h3 {
  position: absolute;
  text-align: center;
  vertical-align: center;
  width: 90%;
  height: 80%;
  left: 10px;
  font-size: 25px;
  background: none;
  border: none;
  border-radius: 5px;
  opacity: 1;
  transition: 0.7s opacity;
}

#h3.fade {
    opacity: 0;
    transition: none;
}

.speech-buble-bottom {
  position: relative;
  display: triangle;
  border-right: solid 4px black;
  border-bottom: solid 4px black;
  top: -23.5%;
  left: 30%;
  width: 15px;
  height: 20px;
  background: white;
  z-index: 1;
  transform: rotate(13deg);
}

.balloon-1 {
  position: absolute;
  top: -2%;
  left: 70%;
  width: 100px;
  height: 110px;
  background: red;
  border-radius: 50%;
  z-index: 1;
}

.balloon-bottom-1 {
  position: absolute;
  top: 22%;
  left: 76%;
  height: 0;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: transparent;
  border-bottom: 15px solid red;
  z-inedx: 1;
}

.balloon-string-1 {
  position: absolute;
  top: 29.5%;
  left: 69%;
  width: 80px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(100deg);
  z-inedx: -1;
}

.balloon-2 {
  position: absolute;
  top: -8%;
  left: 75%;
  width: 100px;
  height: 110px;
  background: #228B22;
  border-radius: 50%;
  z-index: -1;
}

.balloon-string-2 {
  position: absolute;
  top: 26%;
  left: 69%;
  width: 110px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(115deg);
  z-inedx: -1;
}

.balloon-3 {
  position: absolute;
  top: -4%;
  left: 78%;
  width: 100px;
  height: 110px;
  background: #9400D3;
  border-radius: 50%;
  z-index: -1;
}

.balloon-bottom-3 {
  position: absolute;
  top: 20%;
  left: 84%;
  height: 0;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: transparent;
  border-bottom: 15px solid #9400D3;
}

.balloon-string-3 {
  position: absolute;
  top: 29%;
  left: 71%;
  width: 110px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(120deg);
  z-inedx: -1;
}

.balloon-4 {
  position: absolute;
  top: -2%;
  left: 85%;
  width: 100px;
  height: 110px;
  background: #FFD700;
  border-radius: 50%;
  z-index: 1;
}

.balloon-bottom-4 {
  position: absolute;
  top: 22%;
  left: 91%;
  height: 0;
  width: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: transparent;
  border-bottom: 15px solid #FFD700;
}

.balloon-string-4 {
  position: absolute;
  top: 29.5%;
  left: 73%;
  width: 130px;
  height: 20px;
  border: solid 6px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 50%/100px 100px 0 0;
  border-radius: 50%;
  border-right: solid 5px black;
  transform: rotate(140deg);
  z-inedx: -1;
}

.head {
  position: absolute;
  top: 5%;
  left: 40%;
  width: 125px;
  height: 135px;
  background: pink;
  border-radius: 5px;
}

.l-lash-1 {
  position: absolute;
  top: 10%;
  left: 28%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(-50deg)
}

.l-lash-2 {
  position: absolute;
  top: 8%;
  left: 30%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(-30deg)
}

.l-lash-3 {
  position: absolute;
  top: 8%;
  left: 33%;
  width: 3%;
  height: 6%;
  background: black;
  transform: rotate(-20deg)
}

.r-lash-1 {
  position: absolute;
  top: 10%;
  left: 75%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(50deg)
}

.r-lash-2 {
  position: absolute;
  top: 8%;
  left: 73%;
  width: 3%;
  height: 8%;
  background: black;
  transform: rotate(30deg)
}

.r-lash-3 {
  position: absolute;
  top: 8%;
  left: 70%;
  width: 3%;
  height: 6%;
  background: black;
  transform: rotate(20deg)
}

.eye-left {
  position: absolute;
  top: 15px;
  left: 35px;
  width: 30px;
  height: 50px;
  background: white;
  border-radius: 50%;
  border-left: solid 3px lightGrey;
}

.eye-right {
  position: absolute;
  top: 15px;
  left: 66px;
  width: 30px;
  height: 50px;
  background: white;
  border-radius: 5px;
  border-radius: 50%;
  border-left: solid 3px lightGrey;
}

.inner-eye-left {
  position: absolute;
  top: 15%;
  left: 19%;
  width: 42%;
  height: 45%;
  background: black;
  border-radius: 50%;
  border-left: solid 9px darkOliveGreen;
  border-top: solid 9px darkOliveGreen;
  border-bottom: solid 9px darkOliveGreen;
}

.inner-eye-right {
  position: absolute;
  top: 15%;
  left: 0%;
  width: 42%;
  height: 45%;
  background: black;
  border-radius: 50%;
  border-left: solid 9px darkOliveGreen;
  border-top: solid 9px darkOliveGreen;
  border-bottom: solid 9px darkOliveGreen;
}

.pupil-left {
  position: absolute;
  top: 15%;
  left: 15%;
  width: 42%;
  height: 35%;
  background: white;
  border-radius: 50%;
}

.pupil-right {
  position: absolute;
  top: 15%;
  left: 10%;
  width: 35%;
  height: 30%;
  background: white;
  border-radius: 50%;
}

.hair-left {
  position: absolute;
  top: -25%;
  left: 45%;
  width: 5%;
  height: 30%;
  background: pink;
  transform: rotate(-30deg)
}

.hair-right {
  position: absolute;
  top: -18%;
  left: 60%;
  width: 5%;
  height: 25%;
  background: pink;
  transform: rotate(30deg)
}

.hair-top-left {
  position: absolute;
  top: -30%;
  left: 32%;
  width: 15%;
  height: 13%;
  background: pink;
  border-radius: 50%;
}

.hair-top-right {
  position: absolute;
  top: -25%;
  left: 65%;
  width: 15%;
  height: 13%;
  background: pink;
  border-radius: 50%;
}

.mouth-top {
  position: absolute;
  top: 60%;
  left: 29%;
  width: 50%;
  height: 17%;
  background: pink;
  border-radius: 50%;
  z-index: 1;
}

.mouth {
  position: absolute;
  top: 61%;
  left: 29%;
  width: 50%;
  height: 17%;
  background: none;
  border-radius: 50%;
  border-bottom: solid 4px black;
}

.ear-bar-1 {
  position: absolute;
  top: 34%;
  left: -9%;
  width: 120%;
  height: 31%;
  background: lightGrey;
  z-index: -1;
}

.ear-bar-2 {
  position: absolute;
  top: 40%;
  left: -18%;
  width: 140%;
  height: 19%;
  background: pink;
  z-index: -2;
}

.ear-bar-3 {
  position: absolute;
  top: 45%;
  left: -25%;
  width: 155%;
  height: 10%;
  background: lightGrey;
  z-index: -3;
}

.ear-left-circle {
  position: absolute;
  top: 41%;
  left: -37%;
  width: 17%;
  height: 17%;
  background: pink;
  border-radius: 50%
}

.ear-right-circle {
  position: absolute;
  top: 41%;
  left: 125%;
  width: 17%;
  height: 17%;
  background: pink;
  border-radius: 50%
}

.neck {
  position: absolute;
  top: 100%;
  left: 26.5%;
  width: 50%;
  height: 12%;
  background: lightGrey;
  border-radius: 5px
}


.upper-body {
  position: absolute;
  top: 110%;
  left: -15%;
  width: 130%;
  height: 125%;
  background: pink;
  border-radius: 5px;
  z-index: +1
}

.bullet-1 {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.bullet-2 {
  position: absolute;
  top: 5%;
  left: 88%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.bullet-3 {
  position: absolute;
  top: 88%;
  left: 5%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.bullet-4 {
  position: absolute;
  top: 88%;
  left: 88%;
  width: 8%;
  height: 8%;
  background: lightGrey;
  border-radius: 50%
}

.heart-left {
  position: absolute;
  top: 20%;
  left: 68%;
  width: 8%;
  height: 15%;
  background: red;
  border-radius: 50%;
  transform: rotate(-25deg)
}

.heart-right {
  position: absolute;
  top: 20%;
  left: 72%;
  width: 8%;
  height: 15%;
  background: red;
  border-radius: 50%;
  transform: rotate(25deg)
}

.hand-left {
  position: absolute;
  top: 132%;
  left: -85%;
  width: 80%;
  height: 20%;
  background: pink;
  transform: rotate(30deg);
  z-index: -1;
}

.hand-right {
  position: absolute;
  top: 132%;
  left: 100%;
  width: 80%;
  height: 20%;
  background: pink;
  transform: rotate(-35deg);
  z-index: 1;
}

.h-line-1 {
  position: absolute;
  top: 34%;
  left: 1%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.h-line-2 {
  position: absolute;
  top: 34%;
  left: 20%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.h-line-3 {
  position: absolute;
  top: 34%;
  left: 40%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.h-line-4 {
  position: absolute;
  top: 34%;
  left: 60%;
  width: 35%;
  height: 38%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.palm-left {
  position: absolute;
  top: 0%;
  left: -30%;
  width: 42%;
  height: 60%;
  background: none;
  border-top: solid 14px lightGrey;
  border-radius: 50%;
  transform: rotate(90deg);
}

.palm-right {
  position: absolute;
  top: 0%;
  left: 85%;
  width: 42%;
  height: 60%;
  background: none;
  border-top: solid 14px lightGrey;
  border-radius: 50%;
  transform: rotate(270deg);
}

.left-leg {
  position: absolute;
  top: 235%;
  left: 0%;
  width: 35%;
  height: 80%;
  background: pink;
  z-index: -1;
}

.right-leg {
  position: absolute;
  top: 235%;
  left: 68%;
  width: 35%;
  height: 80%;
  background: pink;
  z-index: -1;
}

.l-line-1 {
  position: absolute;
  top: 0%;
  left: 37%;
  width: 25%;
  height: 50%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: -1;
}

.l-line-2 {
  position: absolute;
  top: 20%;
  left: 37%;
  width: 25%;
  height: 50%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: 1;
}

.l-line-3 {
  position: absolute;
  top: 40%;
  left: 37%;
  width: 25%;
  height: 50%;
  background: lightGrey;
  transform: rotate(90deg);
  z-index: 1;
}

.shoe-left {
  position: absolute;
  top: 90%;
  left: -10%;
  width: 120%;
  height: 20%;
  background: none;
  border-top: solid 18px lightGrey;
  border-radius: 50%;
  z-index: +1
}

.shoe-right {
  position: absolute;
  top: 90%;
  left: -10%;
  width: 120%;
  height: 20%;
  background: none;
  border-top: solid 18px lightGrey;
  border-radius: 50%;
  z-index: +1
}

＆＃13;

<html>
<head>
  	<title>Bootstrap</title>
  	<meta charset="utf-8">
  	<meta name="viewport" content="width=device-width, initial-scale=1">
  	<link rel="stylesheet" type="text/css" href="setest_style.css">
  	<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 	  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    
</head>
<body>  
  <h1 class="tittle">Robot</h1>

<div class="button-holder"><button class="button" onclick="myFunction()">Click Me</button></div>

<div class="Box">
  
  <div class="speech-buble-top">
    <div id="myDIV" style="display: none">
      <h3 id="h3"> Happy Birthday Tiffany!</h3>
    </div>
  </div>
  <div class="speech-buble-bottom"></div>

  <div class="balloon-1"></div>
  <div class="balloon-2"></div>
  <div class="balloon-3"></div>
  <div class="balloon-4"></div>
  <div class="balloon-bottom-1"></div>
  <div class="balloon-bottom-3"></div>
  <div class="balloon-bottom-4"></div>
  <div class="balloon-string-1"></div>
  <div class="balloon-string-2"></div>
  <div class="balloon-string-3"></div>
  <div class="balloon-string-4"></div>

  <div class="head">

    <div class="eye-left">
      <div class="inner-eye-left"></div>
      <div class="pupil-left"></div>
    </div>
    <div class="eye-right">
      <div class="inner-eye-right"></div>
      <div class="pupil-right"></div>
    </div>

    <div class="l-lash-1"></div>
    <div class="l-lash-2"></div>
    <div class="l-lash-3"></div>

    <div class="r-lash-1"></div>
    <div class="r-lash-2"></div>
    <div class="r-lash-3"></div>

    <div class="hair-left"></div>
    <div class="hair-right"></div>
    <div class="hair-top-left"></div>
    <div class="hair-top-right"></div>

    <div class="mouth-top"></div>
    <div class="mouth"></div>

    <div class="ear-bar-1"></div>
    <div class="ear-bar-2"></div>
    <div class="ear-bar-3"></div>

    <div class="ear-left-circle"></div>
    <div class="ear-right-circle"></div>

    <div class="neck"></div>
    <div class="upper-body">


      <div class="bullet-1"></div>
      <div class="bullet-2"></div>
      <div class="bullet-3"></div>
      <div class="bullet-4"></div>
      <div class="heart-left"></div>
      <div class="heart-right"></div>
      <div class="bullet-center"></div>
    </div>

    <div class="hand-left">
      <div class="h-line-1"></div>
      <div class="h-line-2"></div>
      <div class="h-line-3"></div>
      <div class="h-line-4"></div>
      <div class="palm-left"></div>
    </div>

    <div class="hand-right">
      <div class="h-line-1"></div>
      <div class="h-line-2"></div>
      <div class="h-line-3"></div>
      <div class="h-line-4"></div>
      <div class="palm-right"></div>
    </div>

    <div class="left-leg">
      <div class="l-line-1"></div>
      <div class="l-line-2"></div>
      <div class="l-line-3"></div>
      <div class="shoe-left"></div>
    </div>

    <div class="right-leg">
      <div class="l-line-1"></div>
      <div class="l-line-2"></div>
      <div class="l-line-3"></div>
      <div class="shoe-right"></div>
    </div>

  </div>
  <!--end of head-->

</div>

</body>
</html>

＆＃13;

＆＃13;

＆＃13;

Answer 3

可以使用css动画，添加css类并删除它们。

function fadeOut() {
  var myElement = document.querySelector("#myElement");
  myElement.classList.remove('fadeIn');
  myElement.classList.add('fadeOut');  
}

function fadeIn() {
  var myElement = document.querySelector("#myElement");
  myElement.classList.remove('fadeOut');
  myElement.classList.add('fadeIn');
}

#myElement{
  width: 100px;
  height: 100px;
  background: red;
}

.fadeOut{
  -webkit-animation: fadeOut 1.0s forwards;
}

.fadeIn{
  -webkit-animation: fadeIn 1.0s forwards;
}

@keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
}

@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}

<div id="myElement">
</div>

<button onclick="fadeOut()">
  Hide
</button>

<button onclick="fadeIn()">
  Show
</button>