HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>dequeue styles compared</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 440px; }
    .box {
      margin: 8px 0; padding: 14px; border-radius: 8px;
      background: #e0e7ff; font-weight: 600;
    }
    button { margin: 4px 6px 4px 0; padding: 8px 12px; }
  </style>
</head>
<body>
  <button type="button" data-style="static">jQuery.dequeue</button>
  <button type="button" data-style="instance">.dequeue()</button>
  <button type="button" data-style="next">next()</button>
  <div class="box" id="box">Pick a style</div>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $( "button" ).on( "click", function () {
      var style = $( this ).data( "style" );
      var $box = $( "#box" ).stop( true, true ).show().removeClass().addClass( "box" );

      if ( style === "static" ) {
        $box.text( "static…" ).fadeOut( 250 ).queue(function () {
          $( this ).text( "via jQuery.dequeue" ).addClass( "done" );
          jQuery.dequeue( this );
        }).fadeIn( 250 );
      } else if ( style === "instance" ) {
        $box.text( "instance…" ).fadeOut( 250 ).queue(function () {
          $( this ).text( "via .dequeue()" ).addClass( "done" );
          $( this ).dequeue();
        }).fadeIn( 250 );
      } else {
        $box.text( "next…" ).fadeOut( 250 ).queue(function ( next ) {
          $( this ).text( "via next()" ).addClass( "done" );
          next();
        }).fadeIn( 250 );
      }
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery.dequeue() vs .dequeue() vs next() (Try It)