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

how to highlight a div for a few seconds using jQuery

提问by morpheous

I want to be add the following to a a page:

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

When a div is clicked, I want to:

单击 div 时，我想：

1. change the background color of the clicked on div for a few seconds
2. revert back to the original background color after a few seconds

1. 将点击的 div 的背景颜色更改几秒钟
2. 几秒钟后恢复到原来的背景颜色

I want to do this by using only jQuery available functions - i.e. not using a plugin or anything else. I am relatively new to jQuery, but I think a possible solution involves the use of changing the class of the selected div and using a timer.

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

I am not sure how to put it all together though. Can anyone provide a few lines that show how to do it?

我不知道如何把它们放在一起。谁能提供几行说明如何做到这一点？

This is what I have so far:

这是我到目前为止：

$(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?
 });
});

回答by Sarfraz

One way is to go about like this using setTimeout:

一种方法是使用setTimeout：

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

回答by Amr Badawy

You can use the jQuery UI's Highlight Effect:

您可以使用jQuery UI 的高亮效果：

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

Demo in 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>

回答by Manaf Abu.Rous

I think you are looking for the Highlighteffect.

我认为您正在寻找高光效果。

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

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

回答by Darin Dimitrov

You could use the setTimeoutfunction:

您可以使用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);
});

回答by Sverrir Sigmundarson

For posterity, here is an answer involving the jQuery queue() function.

对于后代，这里有一个涉及 jQuery queue() 函数的答案。

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

From: https://forum.jquery.com/topic/inserting-a-delay-between-adding-and-removing-a-class#14737000002257187

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