如何更改聚焦元素的背景顏色幾秒鐘？

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>

Answer 2

這裏是關於focus事件中使用setTimeout溶液。

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

Answer 3

$(document).ready(function(){ 
    $("#two").focus(function(){ 
     $(this).css("background-color","green"); 
     setTimeout(function(){ 

      $("#two").css("background-color","yellow"); 
     },1000); 
    });  
}); 

試試這個...