How to set toggleClass (jquery) speed?

Asked

Viewed 214 times

0

I would like to define the animation speed of toggleClass but it didn’t work. I solved the problem with CSS:

-webkit-transition: all .5s ease;
transition: all .5s ease;

But still, I’d like to know what it would look like jQuery?

Here’s how I tried :

$(document).ready(function() {
  $("#help").click(function() {
    $("#faq").toggleClass("col-md-10", 500);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="faq">
  <p>
    Exemplo exemplo Exemplo exemplo Exemplo exemplo Exemplo exemplo Exemplo exemplo
  </p>
  <input type="button" id="help" value="change-heigth">
</div>

jquery bootstrap-3 jquery-toggleclass
  • 1

    André good afternoon give a look at this link maybe this is what you are looking for http://jsfiddle.net/UscQk/2/

1 answer

0

You forgot to add the classes in the test col-md-10 and col-md-12.

In addition, the jquery.ui

$(document).ready(function() {
  $("#help").click(function() {
    $("#faq").toggleClass("col-md-10", 500);
  });
});
.col-md-12 {

  line-height: 40px;
  background-color: #e5e5e5;
  position: absolute;

}

.col-md-10 {

  line-height: 80px;
  background-color: #ff0000;
    position: absolute;


}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script
  src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
  crossorigin="anonymous"></script>

<input type="button" id="help" value="Mudar Classe com Toogle Speed">

<div class="col-md-12" id="faq">
  <p>
    Exemplo exemplo Exemplo exemplo Exemplo exemplo Exemplo exemplo Exemplo exemplo
  </p>
  
</div>

Browser other questions tagged jquery bootstrap-3 jquery-toggleclass

You are not signed in. Login or sign up in order to post.