title: jQuery sortable. Sort on click with animation
body: <p>I have a list of sortable and by click on a specific button the li element goes up or down in the list. I have already done this, but i need it to go up or down with animation. I guess my method isn't really great for accomplishing this.</p>
  
  <p>Here's the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function() {
      $( "#sortablemain" ).sortable({
   axis: "y",
      opacity: 1,
      scrollSpeed: 0,
      scroll: true,
      scrollSensitivity: 1000,
      helper: 'clone',
   tolerance: 'pointer',
   sort: function() {
    return false;
   }
      }).disableSelection().on("click",".uk-icon-arrows-v", function() {
          li = $(this).closest("li");
   if ($(this).attr("id") == "up"){
       var liPrev = li.prev();
    if (liPrev.length != 0){
        var liTMP = $('&lt;div&gt;').append($(li).clone()).html();
        li.detach();
        liPrev.before(liTMP);
    }
   } else {
       liNext = li.next();
       if (liNext.length != 0) {
                  var liTMP = $('&lt;div&gt;').append($(li).clone()).html();
    li.detach();
    liNext.after(liTMP);
       }
   }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>UPDATE: the HTML is kinda massive. If you wish you can see it here: <a href="http://wdgroup.eu/newves/" rel="nofollow">http://wdgroup.eu/newves/</a> . Scroll a little down to colored tabs, they are the li i want to animate</p>