Jquery淡出淡出问题

Question

Here is the page I'm working on: http://dsa.dartmouth.edu/ . Below the slideshow are four panels that change colors on hover. The background color works fine, but the title color never turns back to its dark color after turning white. Below is the javascript controlling this - how can I get the h2 text to change back to a dark color on rollout?

$featured_control_item.hover( function(){
        if ( ! $(this).hasClass('active-slide') ){
            $(this).find('.et_slide_hover').css({'display':'block','opacity':'0'}).stop(true,true).animate( { 'opacity' : '1' }, featured_controllers_opacity_speed );
            $(this).find('.controller').find('h2').css({'color':'white'}).stop(true,true).animate( { 'color' : '#656464' }, featured_controllers_opacity_speed );
        }}, function(){
        $(this).find('.et_slide_hover').stop(true,true).animate( { 'opacity' : '0' }, featured_controllers_opacity_speed );
        $(this).find('.controller').find('h2').stop(true,true).animate( { 'color' : '#656464' }, featured_controllers_opacity_speed );
    } );

Answer 1

Your problem is that the jQuery animate functionality does not allow for animating colors. You will have to use a separate plugin for that.

All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color() plugin is used). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable.

Answer 2

You cant animate an color change, so maybe try:

$featured_control_item.hover(function(){
  if (!$(this).hasClass('active-slide'))
  {
    $(this).find('.et_slide_hover').css({'display':'block','opacity':'0'}).stop(true,true).animate({'opacity' : '1'}, featured_controllers_opacity_speed);
    $(this).find('.controller').find('h2').stop(true,true).css({'color' : 'white'});
  }}, function(){
    $(this).find('.et_slide_hover').stop(true,true).animate( { 'opacity' : '0' }, featured_controllers_opacity_speed);
    $(this).find('.controller').find('h2').stop(true,true).css({'color' : '#656464'});
});

Answer 3

jQuery .animate() doesn't do colours unless you include jQuery UI too. So download and include the jQueryUI JS file (include it after jquery.js), or change your code to just use .css() .