Color Fade

[slj90]

I have a navigation bar that allows the user to change its color. When the color is changed it fades from one color to another. I am trying to make the background do the same. It currently changes color but doesn't have the same fade effect.

 

Navigation Bar:

	var value = $(this).attr('data-color');
		$('.navbar').removeClass().addClass('navbar '+ value);
		
		return false;

Page Background:

function colorPink() {
 document.body.style.backgroundColor = "#FF47D1";
}

What can I do to make them both fade?

Thanks,

[slj90]

Here is the page:

 

http://superiorsupplements.org/dropdown.php

[slj90]

-webkit-transition: all 300ms ease-in-out;

-moz-transition: all 300ms ease-in-out;

-ms-transition: all 300ms ease-in-out;

-o-transition: all 300ms ease-in-out;

transition: all 300ms ease-in-out;