jquery - 从“数据”标签获取文本并加载动画

我有一个无序列表，每个元素上都有'data text'标记，还有空的'p'标记。
我在每个项目上使用click事件并从data text标记中获取文本，以便用动画加载到这个p标记中。
但问题是，动画只在第一次工作时，当点击另一个元素的文本加载没有动画。
演示：jsfiddle

$("ul.list > .list-item").each(function() {
  $(this).click(function() {
    $(".text-here").text($(this).data('text')).animate({
      opacity: '1',
      top: '0'
    });
  });
});

.list-item {
  list-style-tyle: none;
  display: inline-block;
  padding: 15px 25px;
  cursor: pointer;
  border: 1px solid red;
  transition: 0.3s all ease-in-out;
}
.list-item:hover {
  background: red;
  color: white;
}
.text-here {
  position: relative;
  top: 40px;
  transition: 0.3s all ease-in-out;
  opacity: 0;
  padding-left: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
  <li class="list-item" data-text="1 List Item">1</li>
  <li class="list-item" data-text="2 List Item">2</li>
  <li class="list-item" data-text="3 List Item">3</li>
  <li class="list-item" data-text="4 List Item">4</li>
</ul>

<p class="text-here"></p>

提前谢谢！：）

最佳答案

我强烈建议使用a CSS3 animation。
Example Here
在这种情况下，我们可以使用以下关键帧：

@keyframes fadeUp {
  0% { top: 40px; opacity: 0; }
}

然后将类添加到元素中，并在动画结束时将其移除。

.text-here.animate {
  animation: fadeUp 200ms ease-in forwards;
}

完整代码如下：

$('ul.list > .list-item').on('click', function() {
  $('.text-here').addClass('animate').one('animationend', function() {
    $(this).removeClass('animate');
  }).text($(this).data('text'));
});

.list-item {
    list-style-type: none;
    display: inline-block;
    padding: 15px 25px;
    cursor: pointer;
    border: 1px solid red;
    transition: 0.3s all ease-in-out;
}
.list-item:hover {
    background: red;
    color: white;
}
.text-here {
    position: relative;
    top: 0;
    transition: 0.3s all ease-in-out;
    opacity: 1;
    padding-left: 40px;
}
.text-here.animate {
  animation: fadeUp 200ms ease-in forwards;
}

@keyframes fadeUp {
  0% { top: 40px; opacity: 0; }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
    <li class="list-item" data-text="1 List Item">1</li>
    <li class="list-item" data-text="2 List Item">2</li>
    <li class="list-item" data-text="3 List Item">3</li>
    <li class="list-item" data-text="4 List Item">4</li>
</ul>
<p class="text-here"></p>

关于jquery - 从“数据”标签获取文本并加载动画，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33962854/