Append Any Content To An Element With Animations - jQuery Appender
File Size: | 19.3 KB |
---|---|
Views Total: | 4260 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Appender is a tiny jQuery plugin to extend the append() method that allows the user to insert any element (or a group of elements) into your webpage with custom animations.
A typical use of the plugin is to duplicate & remove form fields/groups by clicking add/remove buttons.
Features:
- Fade & slide animations.
- Custom animations using 3rd animation library.
- Shows row numbers.
- Custom remove button.
How to use it:
1. Insert the JavaScript appender.js after loading jQuery library.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh" crossorigin="anonymous"></script> <script src="js/appender.js"></script>
2. Define the content to duplicate.
<div class="row_container"> <p class="row-number"></p> <label> First Name <input type="text" name="fname"> </label> <label> Last Name <input type="text" name="lname"> </label> <label> Age <input type="text" name="age"> </label> <button class="delete-btn">Delete</button> </div>
3. Create a container element to place the duplicated content.
<div id="appendHere"></div>
4. Create an Append button to append the content into the container you just created.
<button class="add-new-item">Append</button>
5. Invoke the plugin with options.
$("#appendHere").appender({ rowSection: '.row_container', addBtn: '.add-new-item', appendEffect: 'fade', // or 'slide' rowNumber: '.row-number', deleteBtn: '.delete-btn' });
6. Determine whether to hide the original content.
$("#appendHere").appender({ hideSection: true });
7. Apply a custom animation to the element. In this example, we're going to use Animate.css for the CSS3 animations.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
$("#appendHere").appender({ addClass: 'animated bounceInLeft' });
Changelog:
2022-06-28
- Update appender.js
2019-07-11
- optional delete button
This awesome jQuery plugin is developed by amiryxe. For more Advanced Usages, please check the demo page or visit the official website.