关于内容更改的瞬时文本突出显示

时间:2018-08-19 04:27:32

标签: javascript jquery html css twitter-bootstrap

在我的应用程序中,有一个像这样的元素:

<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达到这种效果?

编辑:至少,当标签内容更改时,整个标签可以突出显示。

1 个答案:

答案 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中进行检查 希望这会有所帮助。