Move Item To Top Of List With jQuery - moveToTop.js
File Size: | 4.79 KB |
---|---|
Views Total: | 1213 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

moveToTop.js is a funny jQuery plugin that makes it possible to smoothly move an item to the top (or any position) of the list when needed.
How to use it:
1. To begin with, load the moveToTop.js script after jQuery.
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/moveToTop.js"></script>
2. Create a regular HTML list on the page.
<ul class="items-list"> <li class="item">Item 1</li> <li class="item">Item 2</li> <li class="item">Item 3</li> <li class="item">Item 4</li> <li class="item">Item 5</li> <li class="item">Item 6</li> ... </ul>
3. Attach the function and move an item to the top of the previous one when clicked.
$('.item').on('click', function () { $(this).moveToTop({ // options here }); })
4. Or move an item to the top of the list when clicked.
$('.item').on('click', function () { $(this).moveToTop({ target: $('.items-list .item:first-child') }); })
5. Determine the animation speed. Default: 1000ms.
$('.item').on('click', function () { $(this).moveToTop({ speed: 2000 }); })
6. Determine the opacity of the item when moving. Default: 0.7.
$('.item').on('click', function () { $(this).moveToTop({ opacity: 0.5 }); })
7. Trigger functions when the animation starts & ends.
$('.item').on('click', function () { $(this).moveToTop({ start: function () { // do something }, end: function () { // do something } }); })
This awesome jQuery plugin is developed by hassanrazadev. For more Advanced Usages, please check the demo page or visit the official website.