CODEWITHSUNDEEP
javascriptjquery
Cbas
Cbas

Reputation: 6213

Jquery fade in fade out issue

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 );
    } );

Upvotes: 0

Views: 113

Answers (3)

ahmet2106
ahmet2106

Reputation: 5007

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'});
});

Upvotes: 1

Ian Hunter
Ian Hunter

Reputation: 9774

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.

Upvotes: 1

nnnnnn
nnnnnn

Reputation: 150010

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().

Upvotes: 0

Related Questions