在我的应用程序中,有一个像这样的元素:
<label id="label" class="control-label">Label (Foo)</label>
由于某些javascript代码响应用户输入,部分元素文本可能会更改:
<label id="label" class="control-label">Label (Bar)</label>
负责此更改的javascript类似于:
label.text('Label (Bar)');
为了向用户强调此更改,我希望暂时突出显示标签的更改部分。短时间后,此效果应消失。请注意,当DOM更改时,此效果类似于Chromium / Chrome浏览器开发人员工具的Elements视图。
如何使用html,css,jquery,javascript和/或bootstrap达到这种效果?
编辑:至少,当标签内容更改时,整个标签可以突出显示。
答案 0 :(得分:1)
$('#mybtn').click(function() {
$('#label').html('Label (BAR)');
$('#label').addClass('highlight');
});
@keyframes highlight {
0% {
background: red;
}
100% {
background: none;
}
}
.highlight {
animation: highlight 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label id="label" class="control-label">Label (Foo)</label>
<button id="mybtn">
Click Me
</button>
在fiddle中进行检查 希望这会有所帮助。