从"data"标签获取文本并带动画加载。

Question

我有一个无序列表，每个元素上都有"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>

提前感谢您！：）

- tweb

---

如果您可以更改HTML标记，则不需要使用js / jQuery。 - A. Wolff

请尝试此链接：http://jsfiddle.net/kishoresahas/fp0xywzk/4/ - Kishore Sahasranaman

Answer 1

我强烈建议使用CSS3动画。 示例在此处 在这种情况下，我们可以使用以下关键帧：

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

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

.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>

- Josh Crozier

Answer 2

每次创建 element，这样相同的 animation 就会重复。

$("ul.list > .list-item").each(function () {
    $(this).click(function () {
        $(".text-here").remove();
        $("<p />").addClass("text-here").insertAfter(".list");
        $(".text-here").text($(this).attr('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="//ajax.googleapis.com/ajax/libs/jquery/1.9.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>

演示：http://jsfiddle.net/kishoresahas/fp0xywzk/4/

- Kishore Sahasranaman

Answer 3

你必须“重置”之前动画设置的值。

所以像这样的代码会起作用：

/* 
 * Loop list items, click on it,
 * Get text from data-text tag
 * And set to <p> tag with animation 
*/

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

这个硬编码了顶部的40像素，通常情况下你不想这样做，但你可以理解这个思路。

- Richard Deurwaarder

---

我把这段代码粘贴到jsfiddle上，但它不起作用 :( - tweb

CSS 应该应用于 $(".text-here")，而不是 $(this)。 - A. Wolff

@tweb现在试试，我根据A. Wolff的评论进行了修复，感谢A. Wolff！ - Richard Deurwaarder

@Xeli 还需要重绘（至少在 Chrome 上）：http://jsfiddle.net/fp0xywzk/5/ :) - A. Wolff

哈哈，好发现。我想这是因为.animate()在更新之前检索（旧的）CSS值。 - Richard Deurwaarder