0

I created this code for animate background mouseover, but it does not work, only changes the background for the other but does not show effects when I use function animate: 

$(".b_header").mouseover(function() {

$(this).css("background-image","url(images/bot/head_down.png)");



/*

Also I've tried other effects and nothing 

$(this).css( {backgroundPosition: "0 0"} );


$(this).animate(
{backgroundPosition:"(-20px -53px)"}, 
{duration:500});
*/

$(this).animate({ opacity: 5 }, 3000);

});
SomeKittens
  • 38,868
  • 19
  • 114
  • 143
Fran
  • 57
  • 1
  • 10

2 Answers2

4

first of all , make sure you've used document.ready

$(document).ready(function() {
     ......
     $(this).animate({ opacity: 1 }, 3000);
});

second , in your CSS files make sure u set cross-browser opacity attribute 

opacity: 0; /* Chrome 4+, FF2+, Saf3.1+, Opera 9+, IE9, iOS 3.2+, Android 2.1+ */
filter: alpha(opacity=0); /* IE6-IE8 */

finally , opacity value range from 0 (hidden) to 1 (opaque) , there's NO 5 value but it'll work fine as if it's 1

and here's a working example => http://jsfiddle.net/abdullahdiaa/PxGwz/

AbdullahDiaa
  • 1,316
  • 16
  • 17
1

jQuery's animate function does not work with CSS properties that take multiple values. You can usually separately animate each individual value. So, that would explain why trying to animate both values of background-position won't work.

From the jQuery doc for .animate():

All animated properties should be animated to a single numeric value,

For animating opacity, it takes values from 0 to 1, not a value of 5 and to see an animation work with opacity, the object would have to start at a different opacity than you are animating to.

Here's a working example of animating opacity: http://jsfiddle.net/jfriend00/zCL7S/

jfriend00
  • 683,504
  • 96
  • 985
  • 979