如何使用jQuery突出显示div几秒钟

Question

我想将以下内容添加到一个页面:

单击div时,我想:

1. 更改单击div的背景颜色几秒钟
2. 几秒钟后恢复原始背景颜色

我想通过仅使用jQuery可用函数来做到这一点 - 即不使用插件或其他任何东西.我对jQuery比较陌生,但我认为一个可能的解决方案是使用更改所选div的类并使用计时器.

我不知道怎么把它们放在一起.任何人都可以提供一些显示如何操作的行吗？

这是我到目前为止:

$(function(){
 $('div.highlightable').click(function(){
    //change background color via CSS class
    $(this).addClass('highlighted);
    //set a timer to remove the highlighted class after N seconds .... how?
 });
});

Answer 1

一种方法是这样使用setTimeout:

$(function () {
    $('div.highlightable').click(function () {
        $(this).addClass('highlighted');
        setTimeout(function () {
            $('div.highlightable').removeClass('highlighted');
        }, 2000);
    });
});

Answer 2

您可以使用jQuery UI的突出显示效果:

$(".myDiv").effect("highlight", {}, 3000);

Stack Snippets中的演示:

$(function() {

  $(".myDiv").click(function() {
    $(this).effect("highlight", {}, 3000);
  });

});

.myDiv {
  margin: 0px;
  width: 100px;
  height: 80px;
  background: #666;
  border: 1px solid black;
  position: relative;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>


<div class="myDiv"></div>

Answer 3

我认为你正在寻找亮点效果.

http://docs.jquery.com/UI/Effects/Highlight