Hintergrundfarbe soll via jquery weich von opacity 0.5 auf 1 ändern beim scrollen

[m-werk]

Hallo Leute, benötige bitte eure jquery Kenntnisse.

Ich hab folgendes Query auf meiner Seite eingebunden:

<script>
$( document ).ready(function() {
	$(window).scroll(function(){
		var scrolled_val = $(document).scrollTop().valueOf();
 			if(scrolled_val >= 200) {
 				$('.home_menu .logo').fadeIn(800);
 				$('.home_menu .page-header').css('background-color', 'rgba(255,255,255,0.5)');
	    }
	    else if(scrolled_val < 200) {
	    	$('.home_menu .logo').fadeOut(800);
	    	$('.home_menu .page-header').css('background-color', 'rgba(255,255,255,0.5)');
	    }
	});
});
</script>

In der CSS-Datei habe ich bei .page-header den Hintergrund auch mit "background-color:rgba(255,255,255,.5)" definiert.

Funktioniert prima, aber ich hätte jetzt nur gerne, dass sich der Hintergrund nicht so prupt ändert, sondern weich auf opacity 1 übergeht.

[Spooky]

.home_menu .page-header {
    transition:background-color 1s;
}

[m-werk]

perfekt. Danke