CODEWITHSUNDEEP
javascriptjquerycss
Fahim Raza
Fahim Raza

Reputation: 281

How Can I Make A Slide-Out Using Javascript?

I want to create a slide out which slides out automatically on page load, stays for 5 seconds and then slides in and show a button which slide it out again when clicked or hovered.

Upvotes: 0

Views: 176

Answers (1)

Miguel M.
Miguel M.

Reputation: 421

I've prepared a little fiddle that I think does what you're looking for.

<style>
#popup {
  width:300px;
  height:300px;
  top:50%;
  margin-top:-150px;
  background: grey;
  position:absolute;
  left: -300px;
  -transition:all 0.3s ease-in-out;
  -webkit-transition:all 0.3s ease-in-out;
  -moz-transition:all 0.3s ease-in-out;
  -o-transition:all 0.3s ease-in-out;
}

#popup.active {
  left:0;
}

button { 
  float:right;
}
</style>

<div id="popup">
    <button id="close">Close</button>
</div>

<script>
  setTimeout(function() {
     document.getElementById('popup').className="active";
  }, 5000);

  document.getElementById('close').onclick=function () {
      document.getElementById('popup').className="";
  }
</script>

Upvotes: 2

Related Questions