Переместить элемент в начало списка с помощью анимации «стрельба вверх»

Question

Я ищу какой-то способ (javascript, jQuery, CSS3) для перемещения элемента списка в верхнюю часть неупорядоченного списка при нажатии и анимации при этом, чтобы показать элемент, поднимающий список, на свое место вверху списка.

Что-то вроде этого: http://www.sarasoueidan.com/demos/creative-list-effects, но в обратном порядке и с использованием заданного списка элементов:

Возможно ли это вообще?

Вот код, который у меня есть:

.value {
  cursor:pointer;
  position: relative;
}

<ul class="list">
  <li class="value">Value 1</li>
  <li class="value">Value 2</li>
  <li class="value">Value 3</li>
  <li class="value">Value 4</li>
  <li class="value">Value 5</li>
  <li class="value">Value 6</li>
  <li class="value">Value 7</li>
  <li class="value">Value 8</li>
  <li class="value">Value 9</li>
  <li class="value">Value 10</li>
</ul>

$(".value").on("click", function() {
  $(this).animate({
    opacity: 0.5,
    top: "-=200"
  //}, {
    //step: function (now, fx) {
      // if ($()) $(this).stop();

      // if(fx.prop === 'top' && Math.abs(now) >= Math.abs(parseInt($(".list").css("height"), 10))) {
      //   $(this).stop();
      // }
    //}
  }, 1000, function() {
    $(".list").prepend($(this));
    $(this).css("top", 0);
    $(this).animate({
      opacity: 1
    }, 500 );
  });
});

http://jsfiddle.net/xpvt214o/779771/

Он снимает элемент вверх по экрану, но я хочу, чтобы он установился в верхнем положении, тогда как теперь он продолжает идти. Я подумал добавить шаг, где он останавливается, когда достигает высоты контейнера, но он все равно проходит мимо него.

Answer 1

Разобрался.Мне нужно установить значение минус сверху для смещения каждого элемента списка, например, так:

$(".value").on("click", function() {
  var position = $( this ).position();
  event.stopPropagation();

  $(this).animate({
    opacity: 0.5,
    top: "-="+position.top
  }, 800, function() {
    $(".list").prepend($(this));
    $(this).css("top", 0);
    $(this).animate({
      opacity: 1
    }, 500 );
  });
});

И удалить поля, чтобы они останавливались в первой позиции:

body {
  margin: 0;
}
.list {
  margin: 0;
}