Reputation: 57
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
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