I have a button, upon clicking on which a div is shown in 500ms and then after 500ms class shake is added onto that div. This shake classe is then removed after 2 seconds with delay. What I want is if user keep pressing on button then all callbacks become canceled except the last one.
Problematic code if click is pressed many time:
$("button").click(function() {
$(".content").show({
duration: 500,
done: function() {
$(".content").addClass("shake");
var time = parseFloat($(".content").css("transition-duration")) * 1000;
$(".content").delay(time).queue(function() {
console.log("shake");
$(".content").removeClass("shake");
$(".content").dequeue();
});
}
})
});div.content {
border: 1px solid red;
transition: background-color 2s ease-out;
background-color: black;
display: none;
}
div.content.shake {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>My solution with clearQueue:
$("button").click(function() {
$(".content").show({
duration: 500,
done: function() {
$(".content").clearQueue();
$(".content").addClass("shake");
var time = parseFloat($(".content").css("transition-duration")) * 1000;
$(".content").delay(time).queue(function() {
console.log("shake");
$(".content").removeClass("shake");
$(".content").dequeue();
});
}
})
});div.content {
border: 1px solid red;
transition: background-color 2s ease-out;
background-color: black;
display: none;
}
div.content.shake {
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>click</button>
<div class="content">Content</div>But this method never lets the shake class to be added. Because the queue mentioned after clearQueue is also cleared.
How can I prevent clearQueue() from clearing in-future queues? And why does clearQueue() behave this way? How does it know what queue would be added in future?