x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
5
    <style>
6
        .box {
7
            width: 75px;
8
            height: 75px;
9
            background: #00ab55;
10
        }
11
    </style>
12
</head>
13
<body>
14
15
<h1>Stop Current Animation & Play Next Animation in Queue</h1>
16
<button class="btnAnimation">Toggle Animation</button><br><br>
17
<div class="box"></div>
18
19
<script>
20
    $(document).ready(function(){
21
        $(".btnAnimation").on("click", function(){
22
            $(".box").stop().slideToggle(2000);
23
        });
24
    });
25
</script>
26
</body>
27
</html>