JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<style>
		.box
		{
			position: absolute;
			top: 100px;
			left: 10px;
			width: 15px;
			height: 15px;
			background: black;
		}
	</style>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
	<div>
		<button id="start">Go (default queue)</button>
		<button id="startNow">Go (no queue)</button>
		<br>
		<button id="stop">stop(true, true)</button>
		<button id="finish">finish()</button>
	</div>

	<div class="box" />

	<script>
		$(function() {
			$("#stop").on("click", function() {
				$(".box").stop(true, true);
			});

			$("#finish").on("click", function() {
				$(".box").finish();
			});

			$("#start").on("click", function() {
				$(".box")
					.stop(true, true)
					.css({
						left: "10px",
						top: "100px"
					})
					.animate({
						left: 500
					}, 10000);
			});

			$("#startNow").on("click", function() {
				$(".box")
					.stop(true, true)
					.css({
						left: "10px",
						top: "100px"
					})
					.animate({
						left: 500,
					}, {
						duration: 10000,
						queue: false
					});
			});
		});
	</script>
</body>

</html>