CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user9269971
user9269971

Reputation:

hide and show animation jquery

How can I avoid the box animation of hide and show function? I want the hide to make the black div slowly disappear without the box animation. 

$("#hide").click(function(){
  $("#view").hide("slow")
});

$("#visible").click(function(){
  $("#view").show("slow")
});
#view{
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<button id="visible">Visible</button>

<div id="view"></div>

Upvotes: 1

Views: 1001

Answers (2)

4b0
4b0

Reputation: 22323

Use animate with time frame.

$("#hide").click(function() {
  $("#view").animate({
    "opacity": "hide"
  }, 1000);
})

$("#visible").click(function() {
  $("#view").animate({
    "opacity": "show"
  }, 1000);
})
#view {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<button id="visible">Visible</button>

<div id="view"></div>

Upvotes: 0

31piy
31piy

Reputation: 23859

Use fadeIn() and fadeOut() instead:

$("#hide").click(function() {
  $("#view").fadeOut();
})

$("#visible").click(function() {
  $("#view").fadeIn();
})
#view {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide">Hide</button>
<button id="visible">Visible</button>

<div id="view"></div>

Upvotes: 2

Related Questions