Jak mogę zmienić kolor tła fokusowanego elementu na kilka sekund?

Question

Tutaj kod kładzie nacisk na drugi element div. Teraz chcę ustawić kolor tła dla ogniskowanego elementu na inny kolor na kilka sekund, a następnie przywrócić oryginalny kolor. Jak to zrobić?

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

następujący sposób można zmienić kolor na pewien okres czasu. Najpierw żółć się po kilku sekundach z powrotem na zielono.

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

Oto rozwiązanie przy użyciu setTimeout na focus imprezy.

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

spróbować ...