CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
Syed
Syed

Reputation: 16513

Toggle width animation through jQuery while applying bootstrap class

How to apply animation while changing a DIV's class through jQuery from "col-lg-8" to "col-lg-12"

Here is the line of jQuery code that I am using to change the class name, I just like an animation of expand of width to happen while the class name change. 

$(".slide-content").toggleClass("col-sm-8 col-sm-12");

Upvotes: 1

Views: 657

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use css3 transition to do that like

$(window).load(function() {
  $('button').click(function() {
    $(".slide-content").toggleClass("col-sm-8 col-sm-12");
  })
});
.slide-content {
  background-color: lightgrey;
  transition: all 2s;
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>
<div class="container">
  <div class="row">
    <div class="slide-content col-sm-8">asdfasd</div>
  </div>
  <button>Test</button>
</div>

Demo: Fiddle

Upvotes: 3

Related Questions