Div Show Hide With Effect

Question

I have hiding a div with the simple query. I want add a effect when hiding the div.

here is my code

<script type="text/javascript">
      function divcustumfldshow() {
    var dive = document.getElementById("divcustumfld");
    dive.style.display = (dive.style.display == "none") ? "block" : "none";
    }
<script>

Answer 1

I saw CSS3 in tags, so here is a pure CSS3 example:

.block {
    transition: opacity 0.5s linear, transform 0.5s linear;
    opacity: 1;
}

.block.hidden {
    opacity: 0;
    transform: scaleY(0);
}

Here's the fiddle: http://jsfiddle.net/andunai/1e21endf/

However, in this case the element will just disappear visually and won't free the place which it takes, so you'll have to end up with either making this element have position: absolute or animage padding, margin and max-height as well - note that transition of height is still having problems: How can I transition height: 0; to height: auto; using CSS?

.block {
    transition: opacity 0.5s linear, transform 0.5s linear, max-height 0.5s linear, padding 0.5s linear;
    opacity: 1;
    max-height: 30px; /* This one must be approximately of the
                         height of element, not less */
}

.block.hidden {
    opacity: 0;
    max-height: 0;
    padding: 0;
    transform: scaleY(0);
}

Here's an example of adding almost true scaling: http://jsfiddle.net/andunai/1e21endf/1/

Answer 2

If you want a pure CSS3 solution to fade out and then immediately hide, you can simulate the hiding of the element by setting the max-height to 0. You also need to set overflow:hidden when the element is hidden to ensure the max-height isn't affected by the contents.

When you animate the max-height, you delay it by the fade-out time and set the animation time to 0s to ensure it happens immediately when the fade-out has completed, and vice versa on show:

function divcustumfldshow() {
    var dive = document.getElementById("divcustumfld");
    // toggle the class name - this will need to be more inteligent if it has multiple classes
    dive.className = dive.className ? '' : 'hidden';
}

#divcustumfld {
    transition: opacity 2s linear, max-height 0s linear 0s;
    opacity: 1;
    background: red;
    max-height:100%;
}

#divcustumfld.hidden {
    opacity: 0;
    transition: opacity 2s linear, max-height 0s linear 2s;
    max-height: 0;
    overflow:hidden;
}

<button onclick="divcustumfldshow()">Click</button>
<div id="divcustumfld">Foo<br/>Bar</div>
<div>Blah blah</div>

Answer 3

It is not recommended but for idea see output below,you can make an interval and can make opacity alter with each interval. I advice you to use css3 or jquery for effects

 var count= 1;
     i = setInterval(function(){
     divcustumfldshow(count)
  if(count==10)
   clearInterval(i);
else   
  count++;
      },200); 

     function divcustumfldshow(count1) {
        var dive = document.getElementById("divcustumfld");
        if(count1==10)
        {dive.style.display =  "none";}
       else {
         console.log(dive.style.opacity)
       dive.style.opacity = (10-count1)/10;
        }
        }

#divcustumfld{width:200px;
height:200px;
background:red;
opacity:1;
}

<div id="divcustumfld">
  
  
  </div>

Answer 4

demo - http://jsfiddle.net/thjzgv93/

you can use css3 opacity to hide the element

#divcustumfld {
    opacity:1;
    transition: .5s linear;
}
#divcustumfld.hide {
    opacity:0;
}

or you can use translate

demo - http://jsfiddle.net/thjzgv93/1/

#divcustumfld {
    transition: .5s linear;
}
#divcustumfld.hide {
    transform:translatey(-100%)
}

Answer 5

<div id="divcustumfld">
       Your data elements 
</div>

Ok

$('#btn1').click(function(){
    $('#divcustumfld').hide();

});

http://jsfiddle.net/mynameisvikram/vv0ranzo/