CODEWITHSUNDEEP
javascriptcssfadein
user9589034
user9589034

Reputation:

How can I fade text in using JavaScript with button

I have a function for the button already but I can't figure out what I need to add to make it fade in

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

Do I need to make a new function or can I add it to my existing one? Here is my CSS

 opacity: 1;
  transition: 0.7s opacity;
}

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

You can see the whole code here.

Upvotes: 0

Views: 191

Answers (3)

Angel Fraga Parodi
Angel Fraga Parodi

Reputation: 790

it is possible playing with css animations, adding css classes and removing them.

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>

Upvotes: 0

Khushbu Vaghela
Khushbu Vaghela

Reputation: 619

Use fadeIn() and fadeOut() functions as given below.

myFunction = () => {
        var x = document.getElementById("myDIV");
        if (x.style.display === "none") {
          $("#myDIV").fadeIn();
        } else {          
          $("#myDIV").fadeOut();
        }
      }
.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
}
<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>

Upvotes: 1

samanime
samanime

Reputation: 26617

Your problem is you are removing the transition, so it causes it to not transition, but just jump. Leave the transition on the whole time, and just change the opacity:

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>

Upvotes: 2

Related Questions