How to add Animation in toggleClass functon in Jquery

Question

I am making a div which would show on button click and hide on clicking again.I am using toggleClass function of jquery. The problem is I need animation while the div opens and closes. I have tried transition:1s, in all relevant classes and even on body, but in vain. This is the fiddle: http://jsfiddle.net/9dq2p7dw/105/

Here is the code for my jquery:

$(document).ready(function(){
$(".view").click(function(){

$(".view-more").toggleClass("hide show", 500);

});

});

Answer 1

You can use .fadeToggle

$(document).ready(function(){
$(".view").click(function(){

$(".view-more").fadeToggle( "hide show", "linear" );

});

});

.hide{
  display:none;
}
.show{
  display:block
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide" >

<div class="col-md-6">
 <h1>
 asasasas
 </h1>
</div>

<div class="col-md-6">

 <h1>
 sasasas
 </h1>

</div>

</div>

Answer 2

Use transition: all 0.3s ease;

Refer CSS transitions

$(document).ready(function() {
  $(".view").click(function() {

    $(".view-more").toggleClass("hide show", 500);

  });

});

.hide {
  opacity: 0;
  transition: all 1s ease;
}

.show {
  opacity: 1;
  transition: all 1s ease;
}
.view-more{
background-color:#F0C798;
padding:10px;
box-sizing:border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="view">View All</a>
<div class="view-more hide">

  <div class="col-md-6">
    <h1>
      asasasas
    </h1>
  </div>

  <div class="col-md-6">

    <h1>
      sasasas
    </h1>

  </div>

</div>

JS Fiddle Link