How to set the speed of toggleClass (jquery)?

Question

How to set the speed of toggleClass (jquery)?

Navigation

#1 by (0 votes)

0

I would like to set the animation speed of toggleClass but it did not work. I solved the problem with CSS :

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

However, I would 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><divclass="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

asked by anonymous 04.02.2017 / 16:32

1 answer

Aurelia - Use / Import .js files Problems sending mail with mail () function

score 0 · Answer 1

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

In addition, you must also add 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><scriptsrc="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>