如何在几秒钟内更改聚焦元素的背景颜色？

Question

这里的代码重点放在第二个div上.现在我想将聚焦元素的背景颜色设置为另一种颜色几秒钟,然后淡化回原始颜色.怎么做？

$(function(){
    $("#two").focus();
});

body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:600px;width: 60px;background-color:green;}
#thr{height:600px;width: 60px;background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fis">hello
</div>
<div id='two' tabindex='1'>mr
</div>
<div id='thr'>john
</div>

Answer 1

按照以下方式，您可以在一段时间内改变颜色。首先它会变黄，几秒钟后又变回绿色。

$(function(){
  
   $("#two").focus();
  
   setTimeout(function() {
        $('#two').css("background-color", "green");
    }, 2000);
  
});

body{color:white;}
#fis{height:600px;width: 60px;background-color:red;}
#two{height:600px;width: 60px;background-color:yellow; transition:background-color 1s ease;}
#thr{height:600px;width: 60px;background-color:blue;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fis">hello
</div>
<div id='two' tabindex='1'>mr
</div>
<div id='thr'>john
</div>