CODEWITHSUNDEEP
javascriptcss
Good4you
Good4you

Reputation: 55

How to fade-in same DIV when click different button?

basically I want to visually let the user know that the data has change when he clicked a button.

Everytime user click a different button, same div has to disappear and fade-in again.

I have tried toggle and transition but it's not workig, you can see it works only when you click for the first time!

Thank you!

function showMe(n){          
      let myDiv = document.getElementById('myDiv');      
      myDiv.innerHTML = n==1?"Hello Data":"Another Data";
      myDiv.style.opacity = '1';
    }
#myDiv {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  opacity: 0;
  transition: opacity 1s;
}
<div id="myDiv"></div>
  <button onclick="showMe(1)">ShowData</button>
  <button onclick="showMe(100)">AnotherData</button>

Upvotes: 1

Views: 58

Answers (1)

Aman Sharma
Aman Sharma

Reputation: 964

function showMe(n){          
      let myDiv = document.getElementById('myDiv');      
      myDiv.style.opacity = '0';
      setTimeout(function(){ 
        myDiv.innerHTML = n==1?"Hello Data":"Another Data";
        myDiv.style.opacity = '1';
      }, 1000);
      
    }
#myDiv {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  opacity: 0;
  transition: opacity 1s;
}
<div id="myDiv"></div>
  <button onclick="showMe(1)">ShowData</button>
  <button onclick="showMe(100)">AnotherData</button>

Upvotes: 1

Related Questions