javascript - jQuery animate is changing text / not animating background -

We have a page that displays the animation for our header / button users, to navigate the page .

Our problem is that since the buttons are not changing in the background when the mouse comes up, but the color of the text is changing.

What do we want is that the text is white and the header / surname 2

the button itself to match the color of jQuery

  Change the function header ($ stoponroller) {// $ $ ('remove all sections on # siteNav')) .removeClass ('change195369 changeBEBD80 change 708D81 changes 70547A changeD49A4B'); $ ('SubNav2 a'). RemoveClass ('change195369 changes BEBD 80 change 708D81 change 70547A change d 49A4b'); $ ('SubNav h1a'). RemoveClass ('change195369 changes BEBD 80 changes 708D81 changes 70547 A change D 49A4b'); $ ColBlue = '# 19536 9'; // rbga (25, 83, 105, 0.8) $ colMustard = '# BEBD80'; // rbga (190, 18, 128, 0.8) $ colDirtyGreen = '# 708D81'; // rbga (112, 141, 12, 9, 0.8) $ colPurple = '# 70547A'; // rbga (112, 84, 122, 0.8) $ colOrange = '# D49A4B'; // rbga (212, 154, 75, 0.8) var color = [$ colBlue, $ colMustard, $ colDirtyGreen, $ colPurple, $ colOrange]; If (! $ StopOnColor) {colorArray.reverse (); Var interval = setInterval (function () {if (colorArray.length == 0) {clear interval (return); return;} var entry = colorArray.pop (); var oldstr = entry; var str = oldstr; str = / # ({"Background-color": entry}, 1000, function () {$ ('# siteNew') ($.) (.) /. Exec (str) [1]; $ ('header # header-top '(' 'Color' ': $ stopOnColor}, 1000); // $ (' '' '' '' '' '' ' SubNav2 a '' ('change' + str); $ ('. SubNav2 a'). Animate ({"color": entry}, 1000); // $ ('subnav h1 a'). AddClass ('change ( {Color: entry}, 1000); if (colorArray.length == 0) {setTimeout (function () {headerchange ();}, 5000);}}); $ ('. SubNav2 a'). ({"Color": entry}, 1000); $ ('. Subnav h1 a'). ({"Color": entry}, 1000, function () {// $ (this) .addClass ('change' Str;; //; fix override, color on hover.});}, 5000);} and {var oldstr = $ stopOnColor; var str = oldstr; str = /#(.+)/ exec ( Str) [1]; $ ('header # header-top'). Animate ({"background-color": $ stopOnColor}, 1000); $ ('.n Navbar #siteNav .nav & gt; Active & gt; a'). Chetan ({"color": $ stopOnColor}, 1000); $ ('SubNav2 a'). AddClass (); $ ('SubNav h1a'). AddClass ('change' + str); $ ('#siteNew') AddClass ('change' + str); }};  

CSS

  .subNav a {color: # 353535; Background: None; Lesson: None; Lesson: 0; Border color: None; Border: Solid; -WebKit-boundary-radius: 0; -image-radius: 0; Boundary-radius: 0; -WebKit-Box-Shadow: None; -Moz Box-Shadow: None; Box-Shadow: None; Text-transform: uppercase; Padding: 5px 12px; Width: 220 pixels; Max-width: 220 pixels; Max-height: 76px; Display area; Margin: 0 auto; } .subNav is a {{opacity: 0; Status: Relative; } .subNav is an i.fa-angle-right (left: -15px;} .subNav one i.fa-angle-left {left: 15px;} .subNav a: link, .subNav a: visited,. SubNav a: Focus {text-decoration: none;} .subNav one: hover {text-decoration: none; background color: # 353535; color: #fff;} .subNav a.change195369 {border color: # 195369; Color: # 195369;} .subNav a.change195369: Hover {background color: # 195369; color: #fff;} .subNav a.changeBEBD80 {border color: # BEBD80; color: # BEBD80;} .subNav a.changeBEBD80: Hover {background color: # BEBD80; color: # FFF;} .subNav a.change708D81 {border-color: # 708D81; color: # 708D81;} .su BNav a.change708D81: hover {background-color: # 708D81; color: #fff;} .subNav a.change70547A {border color: # 70547a; color: # 70547a;} .subNav a.change70547A: hover {background color : # 70547a; color: #fff;} .subNav a.changeD49A4B {border color: # d49a4b; color: # d49a4b;} Shobnov A. change d49a4b: hover { Background color: # D49A4b; color: #FFF;}  

How do we want it