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;
}

使用“向上调整”动画将项目移至列表顶部

1 个答案: