Come posso cambiare il colore di sfondo dell'elemento focalizzato per alcuni secondi?

Question

Qui il codice si concentra sul secondo div. Ora voglio impostare il colore di sfondo per l'elemento focalizzato su un altro colore per alcuni secondi e poi tornare al suo colore originale. Come farlo?

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

Seguendo modo è possibile cambiare il colore per un certo periodo di tempo. Innanzitutto ridurrà in giallo dopo alcuni secondi tornerà al verde.

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

Ecco soluzione utilizzando setTimeout su focus evento.

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

provare questo ...