Question

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

});

Answer 1

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/