How can I change the background color of focused element for few seconds?

Question

Here the code lays focus on second div. Now I want to set background color for focused element to another color for few secs and then fade back to it's original color. How to do that?

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

Here is solution using setTimeout on focus event.

$(function(){
    $('div').on('focus', function() {
       var $this = $(this);
       $this.addClass('highlight');
       setTimeout(function(){
         $this.removeClass('highlight');
       }, 2000);
    })
    $("#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;}
#fis.highlight{background-color:yellow;}
#two.highlight{background-color:yellow;}
#thr.highlight{background-color:yellow;}

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