jQuery

Use Anti-AI UI Framework with jQuery for classic stack applications.

Installation

Include jQuery and Anti-AI UI Framework via CDN:

CDN
1.<!-- jQuery -->
2.<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
3.

4.<!-- Anti-AI UI Framework -->
5.<script src="https://unpkg.com/anti-ai-ui"></script>

Or install via npm:

npm
1.npm install jquery anti-ai-ui-framework

Basic Setup

Access the Anti-AI UI functions through the global AntiAiUi object:

Basic Setup
1.<script>
2.$(document).ready(function() {
3.  const { runawayButton } = window.AntiAiUi;
4.

5.  const container = document.getElementById('button-container');
6.  const button = document.getElementById('submit-btn');
7.

8.  runawayButton(button, {
9.    container: container,
10.    evasionDistance: 120,
11.    speed: 1.2
12.  });
13.

14.  $(button).on('click', function() {
15.    $('#success-message').slideDown(300);
16.  });
17.});
18.</script>

Complete Example

Here's a complete HTML page with jQuery and Anti-AI UI:

Complete Example
1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4.  <meta charset="UTF-8">
5.  <title>Anti-AI UI + jQuery</title>
6.  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
7.  <script src="https://unpkg.com/anti-ai-ui"></script>
8.  <style>
9.    .button-container {
10.      position: relative;
11.      height: 200px;
12.      border: 1px solid #ccc;
13.      border-radius: 8px;
14.      padding: 20px;
15.    }
16.  </style>
17.</head>
18.<body>
19.  <h1>My Form</h1>
20.  <div class="button-container" id="button-container">
21.    <button id="submit-btn" class="btn">Submit</button>
22.  </div>
23.  <div id="success-message" style="display: none;">Success!</div>
24.

25.  <script>
26.    $(document).ready(function() {
27.      const { runawayButton } = window.AntiAiUi;
28.

29.      const container = document.getElementById('button-container');
30.      const button = document.getElementById('submit-btn');
31.

32.      runawayButton(button, {
33.        container: container,
34.        evasionDistance: 120
35.      });
36.

37.      $(button).on('click', function() {
38.        $('#success-message').fadeIn(400);
39.      });
40.    });
41.  </script>
42.</body>
43.</html>

Best Practices

  • Container positioning: Ensure containers have position: relative
  • Wait for DOM: Always wrap initialization code in $(document).ready()
  • jQuery animations: Combine with jQuery's animation methods for smooth UX

Next Steps