Move Items to Top With Animation Using jQuery Plugin | MoveToTop.js

Move-Items-to-Top-With-Animation

jQuery moveToTop is a lightweight plugin that allows objects to be moved to the top with animation. MoveToTop.js is a plugin that makes it possible to seamlessly move an item to the top (or any position) of the list when needed.

jquery animate slide left, jquery animate easing options, jquery animation examples with code, jquery animation effects for websites, animate jquery, jquery animate scroll to element

How to make use of it:

1. To start 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 record on the web 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 transfer an item to the top of the previous one when clicked.

$('.item').on('click', function () {
  $(this).moveToTop({
    // options here
  });
})

4. Or transfer 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.

$('.item').on('click', function () {
  $(this).moveToTop({
    speed: 2000
  });
})

6. Determine the opacity of the item when transferring.

$('.item').on('click', function () {
  $(this).moveToTop({
    opacity: 0.5
  });
})

7. Trigger features when the animation starts & ends.

$('.item').on('click', function () {
  $(this).moveToTop({
    start: function () {
      // do something
    },
    end: function () {
      // do something
    }
  });
})

Move-Item To Top Of List With jQuery, Move Clicked List Items To Top Of List, Move To Top Plugin/Github, jquery animate css, jquery animate callback

moveToTop


See Demo And Download

Official Website(hassanrazadev): Click Here

This superior jQuery/javascript plugin is developed by hassanrazadev. For extra Advanced Usages, please go to the official website.