Lex Sha
Lex Sha

Reputation: 57

jQueryUI not working after adding duration parameter

When added the second parameter for duration the code doesn't work. It works fine without the duration parameter.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
  <link rel="stylesheet" href="css/style.css">

$(document).ready(function(){
  $(".icon").click(function(){
    $(".menu").toggleClass("toggle-menu", 1000);
  });
});

Upvotes: 1

Views: 68

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with an example solution https://jsfiddle.net/y6rm0pfc/

$(document).ready(function(){
  $(".icon").click(function(){
    setTimeout(function(){
      $(".menu").toggleClass("toggle-menu");
    }, 1000)

  });
});
.menu {
  height: 100px;
  width: 100px;
  background: red;
}

.toggle-menu{
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" class="icon" >
Submit
</button>

<div class="menu">

</div>

toggleClass takes only one parameter, so I have used setTimeout and then inside that I have used toggleClass

Upvotes: 1

Related Questions