javascript - Adding .animate that changes backgroundColor of a span inside link tag doesn't work -

i trying make span class="term-name" animated in way in changes backgroundcolor randomly set predefined colors/hex

here html tag.

    <ul id="filter" class="group">                               <li>                     <a class="art-direction" href="#" title="view items filed under art direction">                         <span class="term-name">art direction</span>                          <!-- start .term-count -->                         <span class="term-count">4<span class="triangle-down"></span></span>                         <!-- end .term-count -->                      </a>                 </li>                   <li>                     <a class="brand-strategy" href="#" title="view items filed under brand strategy">                          <span class="term-name">brand strategy</span>                          <!-- start .term-count -->                         <span class="term-count">2<span class="triangle-down"></span></span>                         <!-- end .term-count -->                      </a>                 </li>                   <li>                     <a class="communication-2" href="#" title="view items filed under communication">                          <span class="term-name">communication</span>                          <!-- start .term-count -->                         <span class="term-count">5<span class="triangle-down"></span></span>                         <!-- end .term-count -->                      </a>                 </li>                   <li>                     <a class="design-collaboration" href="#" title="view items filed under design collaboration">                          <span class="term-name">design collaboration</span>                          <!-- start .term-count -->                         <span class="term-count">2<span class="triangle-down"></span></span>                         <!-- end .term-count -->                      </a>                 </li>        </ul> 

and js code made, doesn't work. supposed put random background color span when hovering it.

$( '#filter a' ).hover( function() { //store available css classes var classes = new array("green", "purple", "teal", "violet", "pink");  //give random class index var randomindex = math.floor(math.random()*classes.length);     $(this).find( '.term-name' ).stop().animate({ backgroundcolor: 'classes[randomnumber]',}, 500, 'easeinoutexpo');  }, function() {     //return original     $(this).find( '.term-name' ).stop().animate({ backgroundcolor: 'white',}, 500, 'easeinoutexpo')";  }); 

it inspired js code (http://jsfiddle.net/gngjz/290/)

btw, can observe link composed of 2 span (term-name & term-count)

    <a><span class="term-name"></span><span class="term-count"></span></a> 

the term-count has animate working , working, here js:

    $( '.term-count' ).each( function() {         $(this).css( 'marginleft', '-' + math.round( ($(this).outerwidth() / 2) ) + 'px' );     });      $( '#filter a' ).hover( function() {          $(this).find( '.term-count' ).stop().animate({ marginbottom: '8px', opacity: 1 }, 500, 'easeinoutexpo');      }, function() {          $(this).find( '.term-count' ).stop().animate({ marginbottom: 0, opacity: 0 }, 500, 'easeinoutexpo');      }); 

thanks, hope js works now.

this fiddle off start. had number of things wrong code such quotes around variables, semicolons , parentheses. recommend watching console when load page , test javascript. tells lot. closely @ fiddle , let me know if have questions. hope helps.

var classes = ["#1ace84", "#a262c0", "#4ac0aa", "#8c78ba", "#d529cd"];  $( '#filter a' ).hover( function(e) {  //give random class index     var randomindex = math.floor(math.random()*classes.length);     $(e.currenttarget).find( '.term-name' ).css( "backgroundcolor", classes[randomindex]);  }, function(e) {     //return original     $(e.currenttarget).find( '.term-name' ).css( "backgroundcolor", 'white'); });