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

【问题标题】：how to highlight a div for a few seconds using jQuery如何使用 jQuery 突出显示 div 几秒钟
【发布时间】：2011-03-20 17:01:12
【问题描述】：

我想将以下内容添加到页面中：

当一个 div 被点击时，我想：

改变被点击的 div 的背景颜色几秒钟
几秒钟后恢复为原始背景颜色

我想通过仅使用 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?
 });
});

【问题讨论】：

标签： jquery

【解决方案1】：

为了后代，这里是一个涉及 jQuery queue() 函数的答案。

$('.menul').addClass('red').delay(1000).queue(function(next){
   $(this).removeClass('red');
   next();
});

发件人：https://forum.jquery.com/topic/inserting-a-delay-between-adding-and-removing-a-class#14737000002257187

【讨论】：

【解决方案2】：

您可以使用jQuery UI's Highlight Effect:

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

堆栈片段中的演示：

$(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>

【讨论】：

只要确保包含库：<script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

【解决方案3】：

一种方法是使用setTimeout：

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

【讨论】：

正是我想要的！

【解决方案4】：

我认为您正在寻找 Highlight 效果。

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

【讨论】：

这不会按预期工作，因为它会在效果完成后隐藏 div。相反，您想要执行以下操作：$(this).effect("highlight", {}, 1000); 以便不隐藏元素。
如果你还没有使用它，那么不值得 jquery ui 依赖。

【解决方案5】：

您可以使用setTimeout 函数：

$('div.highlightable').click(function(){
    var $this = $(this);
    //change background color via CSS class
    $this.addClass('highlighted');
    // set a timeout that will revert back class after 5 seconds:
    window.setTimeout(function() {
        $this.removeClass('highlighted');
    }, 5 * 1000);
});

【讨论】：