Jquery 从“获取文本”；“数据”；标记并加载动画

我有一个无序列表，每个元素上都有“数据文本”标记，还有空的“p”标记。 我在每个项目上使用click事件，并从数据文本标记中获取文本，以加载到此带有动画的p标记中

但问题是动画只在第一次工作，当点击另一个元素时，文本加载没有动画

演示：

$（“ul.list>.list项”）。每个（函数（）{
$（此）。单击（函数（）{
$（“.text here”）.text（$（this.data（'text'））.animate({
不透明度：“1”，
顶部：“0”
});
});
});
。列表项{
列表样式样式：无；
显示：内联块；
填充：15px 25px；
光标：指针；
边框：1px纯红；
过渡：0.3秒，全部缓进缓出；
}
。列表项：悬停{
背景：红色；
颜色：白色；
}
.这里有文字{
位置：相对位置；
顶部：40px；
过渡：0.3秒，全部缓进缓出；
不透明度：0；
左侧填充：40px；
}


1
2
3
4

您必须“重置”上一个动画设置的值

所以类似这样的方法会奏效：

/* 
 * 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'
       }); 
    });
});

/*
*循环列表项，单击它，
*从数据文本标记获取文本
*并设置为带有动画的标签
*/
$（“ul.list>.list项”）。每个（函数（）{
$（此）。单击（函数（）{
$（“.text here”）.css（'top'，'40px'）；
$（“.text here”）.css（'opacity'，'0'）；
$（“.text here”）.text（$（this.data（'text'））.animate({
不透明度：“1”，
顶部：“0”
}); 
});
});

这将硬编码最上面的40px，这通常是您不想做的，但您得到了主意。
每次都创建
元素。因此相同的
动画将重复


$（“ul.list>.list项”）。每个（函数（）{
$（此）。单击（函数（）{
$（“.text here”）.remove（）；
$（“
”）.addClass（“此处的文本”）.insertAfter（“.list”）；
$（“.text here”）.text（$（this.attr（'data-text'））.animate({
不透明度：“1”，
顶部：“0”
});
});
});
。列表项{
列表样式样式：无；
显示：内联块；
填充：15px 25px；
光标：指针；
边框：1px纯红；
过渡：0.3秒，全部缓进缓出；
}
。列表项：悬停{
背景：红色；
颜色：白色；
}
.这里有文字{
位置：相对位置；
顶部：40px；
过渡：0.3秒，全部缓进缓出；
不透明度：0；
左侧填充：40px；
}


1
2
3
4

我强烈建议使用


在这种情况下，我们可以使用以下关键帧：

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

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

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

完整代码如下：


$（'ul.list>.list item'）。在（'click'，function（）上{
$（'.text here'）.addClass（'animate'）.one（'animationend'，function（）{
$（this.removeClass（'animate'）；
}).text（$（this.data（'text'））；
});
。列表项{
列表样式类型：无；
显示：内联块；
填充：15px 25px；
光标：指针；
边框：1px纯红；
过渡：0.3秒，全部缓进缓出；
}
。列表项：悬停{
背景：红色；
颜色：白色；
}
.这里有文字{
位置：相对位置；
排名：0；
过渡：0.3秒，全部缓进缓出；
不透明度：1；
左侧填充：40px；
}
.text-here.animate{
动画：fadeUp 200毫秒向前移动；
}
@关键帧fadeUp{
0%{顶部：40px；不透明度：0；}
}


1
2
3
4

我在JSFIDLE中粘贴了这段代码，但它不起作用：（CSS应该应用于
$（“.text here”）
，而不是
$（这个）
@tweb现在试试吧，我做了一个修复，多亏了a.Wolff，谢谢a.Wolff！@Xeli仍然需要重新绘制（至少在chrome上）：）哈哈，抓到了。我想这是因为.animate（）在更新（旧的）css值之前检索这些值。如果您可以更改HTML标记，您不需要js/jQuery来实现这一点，试试这个