animation in Jquery : re-arranging list item using eq? -

is there possibility of animation in re-arranging list items .

i have 5 list items

a,b,c,d,e   

now on click wanted animate clicked list item come nicely in middle , other move accordingly. order not change if user click on done in 3 step animation

1) a,b,c,d,e  initial  2) e,a,b,c,d  first step 3) d,e,a,b,c   in center  

so no mater how many step perform clicked item in center should smooth animation. changing position in list done can't perform animation effect on it. can manage order change in children animation?

the code show below based on left position not changing order change css , animate not actual order

here fiddle test

      $('.horizontal li').on ('click',function (e)       {              $(this).animate({ left: 150 }, 'slow');        $(this).addclass('active').siblings().removeclass('active'); 

i added class 'active' make center element highlighted on click, can't smoothly animate list items when click re-arrange list-items.

css

  .horizontal  li.active {         /*background:#2794c7;*/         font-weight:bold;         color:blueviolet;         font-size: 20px;         /*height: 150px;*/         /*width:150px;*/       webkit-transform: scale(1.2) ;       -moz-transform: scale(1.2) ;       -ms-transform: scale(1.2) ;       -o-transform: scale(1.2) ;       transform: scale(1.2) ;     } 

you giving left property of relative li. so, wasn't animating. convert left padding-left , give li display property block

$('.horizontal li').on('click', function(e) {      $(this).animate({      'padding-left': '150px'    }, 'slow');      $(this).addclass('active').siblings().removeclass('active');  });

.horizontal li.active {    /*background:#2794c7;*/    font-weight: bold;    color: blueviolet;    font-size: 20px;    /*height: 150px;*/    /*width:150px;*/    webkit-transform: scale(1.2);    -moz-transform: scale(1.2);    -ms-transform: scale(1.2);    -o-transform: scale(1.2);    transform: scale(1.2);  }  li {    display: block;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="horizontal">    <ul>      <li>test</li>      <li>rest</li>      <li>best</li>      <li>waste</li>    </ul>  </div>

updates fulfill re-arrangement requirement:

$(document).ready(function() {    $(".rearrangable div").each(function() {      $(this).css("left", $(this).data('order') * 110);    });    $(".rearrangable div").click(function() {      if ($(this).data('order') != 2) {        var cur = $(this);        $(".rearrangable div").each(function() {          if ($(this).data('order') == 2) {            $(this).data('order', cur.data('order'));            return false;          }        });        $(this).data('order', 2);        $(".rearrangable div").each(function() {          $(this).css("left", $(this).data('order') * 110);        });      }    });  });

.rearrangable {    position: relative;  }  .rearrangable div {    position: absolute;    height: 100px;    width: 100px;    text-align: center;    background: grey;    cursor: pointer;    transition: left 1s;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="rearrangable">    <div data-order="0">1</div>    <div data-order="1">2</div>    <div data-order="2">3</div>    <div data-order="3">4</div>    <div data-order="4">5</div>  </div>

above example used divs instead of list achieving rearrangement goal. divs clicked swap place div in center.