2

Sorry for bad english.

The animate function of jQuery work fine at line 2. But at line 3 doesn't work... why? 

  $('.opac').hover(function(){  
    $('img', this).animate({opacity: '0.6'}, 500);
    $('p', this).animate({background: 'orange'}, 500);   
  });

The HTML is this:

  <div class="opac">
    <img src="image.png" />
    <p class="fot">text here...</p>
   </div>

Thanks! ps: the developer tool doesn't give any error...

Šime Vidas
  • 182,163
  • 62
  • 281
  • 385
CastenettoA
  • 673
  • 5
  • 17
  • 1
    Right now the jQuery code you posted is having the syntax error. Is it the actual code? May be that's why the code is not working – Dhaval Marthak Jul 04 '13 at 16:18
  • 1
    Dado sad it you are missing ); at the end of a function. Maybe this will help also > http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor – Vladimir Bozic Jul 04 '13 at 16:19
  • Oh, I written wrong the code. Now it's right. But the original code it's right and don't work again... – CastenettoA Jul 04 '13 at 16:20

4 Answers4

5

jQuery doesn't support animating colors natively. Here's a quick plugin to include in your codebase:

From http://www.bitstorm.org/jquery/color-animation/

(function(a){function b(){var b=a("script:first"),c=b.css("color"),d=!1;if(/^rgba/.test(c))d=!0;else try{d=c!=b.css("color","rgba(0, 0, 0, 0.5)").css("color"),b.css("color",c)}catch(e){}return d}function c(b,c,d){var e="rgb"+(a.support.rgba?"a":"")+"("+parseInt(b[0]+d*(c[0]-b[0]),10)+","+parseInt(b[1]+d*(c[1]-b[1]),10)+","+parseInt(b[2]+d*(c[2]-b[2]),10);return a.support.rgba&&(e+=","+(b&&c?parseFloat(b[3]+d*(c[3]-b[3])):1)),e+=")"}function d(a){var b,c;return(b=/#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})/.exec(a))?c=[parseInt(b[1],16),parseInt(b[2],16),parseInt(b[3],16),1]:(b=/#([0-9a-fA-F])([0-9a-fA-F])([0-9a-fA-F])/.exec(a))?c=[17*parseInt(b[1],16),17*parseInt(b[2],16),17*parseInt(b[3],16),1]:(b=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(a))?c=[parseInt(b[1]),parseInt(b[2]),parseInt(b[3]),1]:(b=/rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9\.]*)\s*\)/.exec(a))&&(c=[parseInt(b[1],10),parseInt(b[2],10),parseInt(b[3],10),parseFloat(b[4])]),c}a.extend(!0,a,{support:{rgba:b()}});var e=["color","backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","outlineColor"];a.each(e,function(b,e){a.Tween.propHooks[e]={get:function(b){return a(b.elem).css(e)},set:function(b){var f=b.elem.style,g=d(a(b.elem).css(e)),h=d(b.end);b.run=function(a){f[e]=c(g,h,a)}}}}),a.Tween.propHooks.borderColor={set:function(b){var f=b.elem.style,g=[],h=e.slice(2,6);a.each(h,function(c,e){g[e]=d(a(b.elem).css(e))});var i=d(b.end);b.run=function(b){a.each(h,function(a,d){f[d]=c(g[d],i,b)})}}}})(jQuery);

You also need to set an initial color value to animate from (if you haven't already), and as far as I know (could be wrong) you should be using hex or rbg values for your colors to animate properly and not explicit color names.

relic
  • 1,662
  • 1
  • 16
  • 24
3

In case you aren't opposed to CSS3: http://jsfiddle.net/MkgDC/1/

img {
    opacity: 1;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
p {
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.opac:hover > img {
    opacity: .6;
}
.opac:hover > p {
    background: orange;
}
Derek Story
  • 9,518
  • 1
  • 24
  • 34
2

Or you can use jQueryUI

$('div.opac').hover(function(){  
    jQuery('img', this).animate({opacity: '0.6'}, 500);
     jQuery('p', this).animate({backgroundColor: "#aa0000"}, 500 );
  });

Fiddle

Dhaval Marthak
  • 17,246
  • 6
  • 46
  • 68
0

Background color cannot be animated. see this link http://api.jquery.com/animate/

Bhushan Kawadkar
  • 28,279
  • 5
  • 35
  • 57