CODEWITHSUNDEEP
javascriptjquery
Sarthak Tuteja
Sarthak Tuteja

Reputation: 137

How to add Animation in toggleClass functon in Jquery

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);

});

});

Upvotes: 4

Views: 5502

Answers (4)

Geethu Jose
Geethu Jose

Reputation: 1993

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

Upvotes: 1

Ganesh Putta
Ganesh Putta

Reputation: 2681

try this, You can't animate display, rather try this, may be this will help you

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggleClass demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
  <style>
  .col-md-6{
    background:red;
  }
 
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<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>
 
<script>


$(document).ready(function(){
$(".view").click(function(){
$(".view-more").toggle(500);
});

});
</script>
 
</body>
</html>

Upvotes: 0

Curiousdev
Curiousdev

Reputation: 5788

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>

Upvotes: 3

Shailesh Hatte
Shailesh Hatte

Reputation: 1

If all you wish to do is hide and show a div upon clicking a button, you can do so in simpler way.

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

    $(".view-more").toggle(function() {
        $(this).animate({height: '200'});
}, function() {
        $(this).animate({height: '100'});
    });​

    });

When given a list of functions as arguments, the .toggle(fn1, fn2) method will alternate between the functions given starting with the first one. This automatically keeps track of the toggle state for you - you don't have to do that.

jQuery doc is here. There are multiple forms of .toggle() depending upon the arguments used so you don't always find the right one when searching the jQuery doc.

Upvotes: 0

Related Questions